以多个div为中心

Question

如何将多个（3）div与其中的图像（所有相同尺寸）对齐？

示例：

＆＃13;

＆＃13;

.desc {
  margin-top: 2%;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

实际上，它们是内联的，但我不知道如何将它们集中在一起。

Answer 1

尝试CSS flexbox ：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 2

http://jsfiddle.net/pb2uq3y5/

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

如果.desc_img元素具有边距，填充或边框，则无效。保证金和填充有一种解决方法，即将box-sizing属性设置为padding-box或border-box，这将分别解决填充或填充和边框问题（将会出现问题）没有理由仅在你的情况下使用padding-box，但有些情况可能会被使用。）当涉及保证金时，你有两个选项（如果需要，这些选项也可用于解析填充和边框） ：flexbox（请参阅@ Michael_B＆＃39;回答并将width: 100%添加到他的演示中的.desc_img的CSS属性），并将它们分别包含在包装器中，以便在{中设置边距{1}}和宽度在.desc_img。

的容器中设置