浮动左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: flex; justify-content: center; flex-wrap: wrap; ...并且您不需要包装单元格的2个内部div。

#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 2

既然你有固定宽度的一个div，你可以简单的设置位置，绝对的，左为50％，余量-450px（宽度的一半）

这里是一个example

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

Answer 3

取而代之的是浮动的，使用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：如果你不喜欢的DIV之间的小空间，您可以在每次关闭DIV（</div>）移动到下一行，可直接用于下一开放<div>的前面。这有助于避免由HTML代码中的换行符造成的空白。