如何水平对齐 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>

CodePen

Answer 1

您只需要 overflow:auto; 即可 container class。

将解决方案发布到您的代码和更新的代码中，看看有什么不同。例如添加 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;
}

这是您修改后的代码笔：http://codepen.io/anon/pen/xwwdmP

如何水平对齐 div 中的列

How to horizontally align columns within a div

html

css

grid