html - 3张图片居中排列

Question

我试图让三张图片居中排列，然后居中放置在页面上。我把它们都排成一排，但我无法让它们居中。关于让我的团队走到中间有什么建议吗？我在包含类和社会类上尝试了 0 auto。很近!!

我的 HTML:首先是 div class=contain 来包装整个东西，但出于某种原因，如果我尝试将类包含在 HTML 中，它会在 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 在容器上，以便元素可以实际填充垂直空间。

这可以在下面看到，带有 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>

希望对您有所帮助! :)