浮動左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代碼中的換行符造成的空白。