居中多个div

Question

如何将多个 (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>

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

Answer 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

Answer 2

http://jsfiddle.net/pb2uq3y5/

您的问题是，当 CSS float 属性未设置为 clear 时，<div> 元素不假定宽度。如果必须并排放置三个元素，占据其父元素的整个宽度，在本例中，即整个页面宽度，则每个元素的宽度为 33.333...%。您必须在 CSS 中设置宽度，因为浏览器不会假定它。

如果 .desc_img 元素有边距、填充或边框，这将不起作用。 margin 和 padding 有一个解决方法，即将 box-sizing 属性设置为 padding-box 或 border-box，这将分别解决 padding 或 padding 和 border 的问题（没有理由只在你的情况下使用 padding-box ，但在某些情况下它可能有用。）当涉及边距时，你有两个选择（这些选项也可用于解决填充和border if necessary): flexbox (see @Michael_B's answer and add width: 100% to .desc_img's CSS properties from his demo), 并将它们分别包含在包装器中这样边距设置在 .desc_img 中，宽度设置在 .desc_img.

的容器中

居中多个div

Centering multiple divs

html

css

flexbox

centering

jsFiddle