如何在div中水平對齊列

Question

我有三個<figure>標籤，我想在我的container div中水平對齊它們。我嘗試了float左，右和邊距自動方法，但沒有奏效。我該怎麼辦？

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    width: 100%; 
 
} 
 
.col { 
 
    width: 33.33%; 
 
    float: left; 
 
}

<div class="container"> 
 
    <figure class="col"> 
 
    <img src="http://placehold.it/300x300"> 
 
    </figure> 
 

 
    <figure class="col"> 
 
    <img src="http://placehold.it/300x300"> 
 
    </figure> 
 

 
    <figure class="col"> 
 
    <img src="http://placehold.it/300x300"> 
 
    </figure> 
 
</div>

CodePen

Answer 1

要在專區內居中圖像，試試這個：

img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

而且這裏是你的修改codepen：http://codepen.io/anon/pen/xwwdmP

Answer 2

你只需要爲overflow:auto;您container類。

發表解決方案，你的代碼和更新看到的差異。例如，添加了border:1px solid red;以查看區別。

解決方案

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    border:1px solid red; 
 
    overflow:auto; /*added*/ 
 
} 
 

 
.col {  
 
    width: 33.33%; 
 
    float: left; 
 
}

<div class="container"> 
 
    <figure class="col""> 
 
    <img src="http://placehold.it/300x300">  
 
    </figure> 
 

 
    <figure class="col""> 
 
    <img src="http://placehold.it/300x300">  
 
    </figure> 
 

 
    <figure class="col"> 
 
    <img src="http://placehold.it/300x300">  
 
    </figure> 
 
</div>

CODEPEN

您的代碼段

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    border:2px solid red; 
 
} 
 

 
.col {  
 
    width: 33.33%; 
 
    float: left; 
 
}

<div class="container"> 
 
    <figure class="col""> 
 
    <img src="http://placehold.it/300x300">  
 
    </figure> 
 

 
    <figure class="col""> 
 
    <img src="http://placehold.it/300x300">  
 
    </figure> 
 

 
    <figure class="col"> 
 
    <img src="http://placehold.it/300x300">  
 
    </figure> 
 
</div>