css 把东西放在中间

vlju58qv 于 12个月前发布在其他

关注(0)|答案(5)|浏览(90)

我做错了什么？我想在这里的东西是在屏幕的中间，但无论我尝试，我不能让它工作。

* {
  box-sizing: border-box;
}

body {
  max-width: 100%;
  line-height: 1.5;
}

#wrapper {
  max-width: 100%;
}

.bild {
  padding: 2em 0 0 2em;
}

img {
  max-width: 60%;
  padding-top: 1em;
  border-radius: 100px;
  float: left;
  display: block
}

h1 {
  font-weight: 900;
  font-size: 2em;
  float: right;
  margin-right: 25em;
  margin-top: 2.2em;
}

.floatright {
  float: left;
  margin-left: 10em;
}

<body>
  <div id="wrapper">
    <div class="bild">
      <img src="images/jag.jpg" alt="En bild på mig">
      <h1>Välkommen!</h1>
      <span class="floatright">Jag heter Patrik Qvarnström</span>
    </div>
  </div>
</body>

不能真正把内容放在中心：

css

来源：https://stackoverflow.com/questions/48170374/want-to-get-the-stuff-centered

5条答案

按热度按时间

oxf4rvwz1#

移除浮动：从img向左添加margin：汽车像这样：

* { 
        box-sizing: border-box;
    }
    body {
        max-width: 100%;
        line-height: 1.5;
    }
    #wrapper {
        max-width: 100%;
    }
    .bild {
        padding: 2em 0 0 2em;
    }
    img {
        max-width: 60%;
        padding-top: 1em;
        border-radius: 100px;
        display: block;
		margin: auto;
    }
    h1 {
        font-weight: 900;
        font-size: 2em;
        float: right;
        margin-right: 25em;
        margin-top: 2.2em;
    }
    .floatright {
        float: left;
        margin-left: 10em;
    }

<body>
    <div id="wrapper">
        <div class="bild">
            <img src="temp.PNG" alt="En bild på mig">
            <h1>Välkommen!</h1>
            <span class="floatright">Jag heter Patrik Qvarnström</span>
        </div>
    </div>
</body>

赞(0）回复(0）举报 12个月前

avkwfej42#

如果Flexbox解决方案适合您-在这里它是（它是非常酷的居中和总）：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  line-height: 1.5;
}

#wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.bild {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 15%;
  height: auto;
  padding-top: 1em;
  border-radius: 100px;
  display: block
}

h1 {
  font-weight: 900;
  font-size: 2em;
  margin-top: .5em;
}

<div id="wrapper">
  <div class="bild">
    <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" alt="En bild på mig">
    <h1>Välkommen!</h1>
    <span class="floatright">Jag heter Patrik Qvarnström</span>
  </div>
</div>

赞(0）回复(0）举报 12个月前

oxcyiej73#

* { 
        box-sizing: border-box;
    }
    #wrapper{
      display: table;
      margin: 0 auto;
    }
    img {
        max-width: 60%;
        padding-top: 1em;
        border-radius: 100px;
        position: relative;
        float: left;
    }
    .container {
        position: relative;
        float: left;
        margin-left: 25px;
    }

<body>
    <div id="wrapper">
        <div class="bild">
            <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" alt="En bild på mig" width="150">
            <div class="container"> 
              <h1>Välkommen!</h1>
              <p class="floatright">Jag heter Patrik Qvarnström</p>
            </div>
        </div>
    </div>
</body>

赞(0）回复(0）举报 12个月前

gstyhher4#

1.**在包含元素上设置宽度：**在包含（父）元素.bild上Declare一个width或max-width属性，例如：max-width: 55%;-相应调整此值以满足要求。
1.**水平居中对齐：**在包含（父）元素.bild上将简写margin属性规则的值decompose为auto，例如：margin: auto;-这将允许包含元素水平居中。

代码嗅探器演示：

* {
  box-sizing: border-box;
}

body {
  max-width: 100%;
  line-height: 1.5;
}

#wrapper {
  max-width: 100%;
}

.bild {
  margin: auto;
  max-width: 55%; /* adjust this value accordingly to suit requirements */
  min-width: 425px; /* for the sake of demonstration */
  overflow: auto;
  border: 1px dashed; /* for the sake of demonstration */
  padding: 10px;
}

img {
  max-width: 60%;
  padding-top: 1em;
  border-radius: 100%;
  float: left;
}

h1 {
  font-weight: 900;
  font-size: 2em;
  margin-top: 2.2em;
}

.floatright {
  float: right;
  margin-left: 10px;
}

<body>
  <div id="wrapper">
    <div class="bild">
      <img src="https://placehold.it/200x200" alt="En bild på mig">
      <h1 class="floatright">Välkommen!</h1>
      <span class="floatright">Jag heter Patrik Qvarnström</span>
    </div>
  </div>
</body>

总结：

.bild是div元素
一个div元素是一个 * 块级 * 元素（占用整个水平宽度，不像 inline 元素）
要水平居中一个 * 块级 * 元素：**1.**声明width属性，**2.**声明margin属性，值为auto
任何元素都可以通过声明display: block成为 * 块级 * 元素
注意：如果声明了任何float属性，上述技术将不会表现得像解释的那样，float将否定任何水平对齐的尝试，除非有问题的元素已被声明为flex-box display，例如：display: flex*
实际演示：
对于块级和内联元素 *
Horizontal Alignment (Arbitrary Elements)（CodePen）
Horizontal Alignment (Text Elements)（CodePen）

赞(0）回复(0）举报 12个月前

uz75evzq5#

P.S.'s answer更进一步使用嵌套的flexbox。
创建#wrapper和.bild flexbox容器。这里的技巧是用flex: 0 0 0;使.bild成为一个“不灵活”的flex项，我还将h1和span元素 Package 在div中，因此img和div是嵌套的flexbox中的两个flex项。
有关更多详细信息，请参见代码中的注解：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  line-height: 1.5;
}

#wrapper {
  display: flex;
  width: 100%;
  height: auto;
  
  /* 
    center child flex-items on the main axis
    (in this case horizontally) 
  */
  justify-content: center; 
}

.bild {
  /*
    we do not want this flex-item to grow or shrink 
    we only want it wide enough to contain it's children
    so flex-basis: 0; makes it as close to zero width as possible
  */
  flex: 0 0 0; /* flex-grow: 0; flex-shrink: 0; flex-basis: 0; */
  
  display: flex;
  gap: 2em; /* between child flex-items */
  align-items: center; /* on the cross-axis (in this case vertically) */
  margin-top: 2em;
}

.bild>img {
  max-width: 15vw;
  height: auto;
  border-radius: 100px;
}

.bild span {
  /* 
    .bild wants to be narrow as possible and 
    will force the text to wrap without this
  */
  text-wrap: nowrap;
}

h1 {
  font-weight: 900;
  font-size: 2em;
}

<div id="wrapper">
  <div class="bild">
    <img src="https://mosmandentistry.com.au/wp-content/uploads/2016/10/orionthemes-placeholder-image-2.png" alt="En bild på mig">
    <div>
      <h1>Välkommen!</h1>
      <span>Jag heter Patrik Qvarnström</span>
    </div>
  </div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

赞(0）回复(0）举报 12个月前

我来回答

css 把东西放在中间

5条答案

相关问题

热门标签

最新问答