多个 div 居中答案

【问题标题】：Centering multiple divs多个 div 居中
【发布时间】：2017-06-18 07:48:58
【问题描述】：

如何将多个 (3) 个包含图像的 div 居中（大小相同）？

例子：

.desc {
  margin-top: 2%;
}

.desc_img {
  float: left;
  font-size: 32px;
}

<div class="container desc">
  <div class="desc_img">
    <i class="fa fa-link fa-5x"></i>
  </div>
  <div class="desc_img">
    <i class="fa fa-cogs fa-5x"></i>
  </div>
  <div class="desc_img">
    <i class="fa fa-share-alt fa-5x"></i>
  </div>
</div>

实际上，它们是内联的，但我不知道如何使它们居中。

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

试试 CSS flexbox：

.container {
  display: flex;
  justify-content: center; /* align items horizontally (in this case) */
  align-items: center;     /* align items vertically (in this case) */
  border: 2px solid black;
}
.desc_img {
  margin: 5px;
}

<div class="container desc">
  <div class="desc_img">
    <img src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="">
  </div>
  <div class="desc_img">
    <img src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="">
  </div>
  <div class="desc_img">
    <img src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="">
  </div>
</div>

jsFiddle

【讨论】：

【解决方案2】：

http://jsfiddle.net/pb2uq3y5/

您的问题是，当 CSS float 属性未设置为 clear 时，<div> 元素不假定宽度。如果有三个元素必须并排放置，占据其父元素的整个宽度，在这种情况下，就是整个页面宽度，那么每个元素的宽度将为 33.333...%。您必须在 CSS 中设置宽度，因为它不是由浏览器假定的。

如果.desc_img 元素有边距、内边距或边框，这将不起作用。边距和填充有一个解决方法，将box-sizing 属性设置为padding-box 或border-box，这将分别解决填充或填充和边框的问题（没有理由使用@987654329 @ 仅在您的情况下，但在某些情况下可能会使用它。）当涉及边距时，您有两个选项（如果需要，这些选项也可用于解决填充和边框）： flexbox（请参阅@Michael_B 的答案和将width: 100% 添加到他的演示中的.desc_img 的CSS 属性），并将它们各自包含在一个包装器中，以便在.desc_img 中设置边距，在.desc_img 的容器中设置宽度。

【讨论】：