连续3张图像居中

Question

我正在尝试使三个图像连续居中，然后在页面上居中。我已经将它们排成一排，但我无法使它们居中。关于让我的团队走到中间的任何建议？我在包含类和社交类上尝试了0自动。很近！！

我的HTML：首先是div class = contain来包装整个内容，但是由于某种原因，如果我尝试在HTML中包含类contains，它会在Stack Overflow上消失，所以请原谅。

.contain {
  max-width: 960px;
  text-align: center;
}

.social {
  position: relative;
  display: inline-block;
  float: left;
  padding: 10px;
}

<div class="contain">
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
  </div>
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
  </div>
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
  </div>
</div>

Answer 1

我建议使用flexbox容器作为元素。

使用flexbox，您需要的是三种不同的样式，以便在水平和垂直方向上集中元素：

• display: flex;
• align-items: self;
• justify-content: center;

请注意，您还需要height在容器上设置a ，以便元素可以实际填充垂直空间。

在下面可以看到这一点，并border添加了一个以展示.container元素占用的区域：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border: 1px solid black;
}

.social {
  position: relative;
  display: inline-block;
  float: left;
  padding: 10px;
}

<div class="container">
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
  </div>
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
  </div>
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
  </div>
</div>

希望这可以帮助！:)