如何在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