浮動小数点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要素を持っているので、あなたは、単に絶対的に位置を設定することができ、（幅の半分）を-450pxし50％と余白に左

ここにあります代わりに、山車の

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

Answer 3

example、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コードの改行によって生じる空白を避けるのに役立ちます。