漂浮左DIV容器中心

Question

如何将div元素集中？他们只漂浮在彼此旁边，但不要集中。

div元素都包含固定宽度图像，图片下有一个可变文本。

<div id="wrapper">
<div style="max-width:900px;margin: 0 auto;">
<div style="width:100%;">

<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div>
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div>
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div>
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div>
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div>
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div>
<div style="float:left;"><img src="img" width="250" height="150" ><br>This text goes under the Picture.</div>
</div>
</div>
</div>

#wrapper{
    margin: 0 auto;
        width: 900px;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

谢谢。

最好的问候

Answer 1

而不是浮子，使用display: inline-block;并将text-align:center应用于其容器：

#wrapper {
  margin: 0 auto;
  width: 900px;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
div>div>div {
  display: inline-block;
}
div>div {
  text-align: center;
}

<div id="wrapper">
  <div style="max-width:900px;margin: 0 auto;">
    <div style="width:100%;">
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
    </div>
  </div>
</div>

p.s。：如果您不喜欢Divs之间的小空间，则可以将每个闭合Div(</div>(移至下一行，直接在下一个开口<div>的前面。这有助于避免HTML代码中的线路断裂引起的白空间。

Answer 2

您可以卸下浮子并在父上使用 display: flex; justify-content: center; flex-wrap: wrap; ...而您不需要包裹单元格的2个内部divs。

#wrapper {
  margin: 0 auto;
  width: 900px;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div id="wrapper">
  <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
  <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
  <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
  <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
  <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
  <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
  <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
  <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
  <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
</div>

Answer 3

由于您的div具有固定的宽度，因此您可以简单地将位置设置为绝对，左至50％，并将保证金设置为-450px(宽度的一半(

这是一个示例

position:absolute;  
left:50%;
margin:0 -450px;