如何在div中水平對齊列

Question

我有三個<figure>標記，我想在我的container div中將它們水平對齊。 我嘗試了使用float left，right和margin auto的方法，但是沒有用。 我該怎么辦？

 * { 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> 

密碼筆

Answer 1

您只需要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> 

Answer 2

要將圖像放在div中，請嘗試以下操作：

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

這是您修改過的Codepen： http ://codepen.io/anon/pen/xwwdmP