3 张图像连续居中

Question

我试图让三张图像连续居中，然后在页面上居中。我把它们都排成一排，但我不能让它们居中。关于让我的小组居中的任何建议？我在包含类和社会类上尝试了 0 auto。很近！！

我的 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，以便元素实际上可以填充垂直空间。

这可以在下面看到，添加了一个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>

希望这会有所帮助！ :)

Answer 2

html

<div class="content">
    <div>
        <img src="facebook.png" alt="" width="75" height="75"/>
    </div>

    <div>
        <img src="twitter.png" alt="" width="75" height="75"/>
    </div>

    <div>
        <img src="instagram.png" alt="" width="75" height="75" />
    </div>
</div>

css

.content { 
    text-align:center; 
}

Answer 3

也许你可以编辑css文件，删除float:left;：

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

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

<div align="center">
<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 4

使用flex 是一个很好的解决方案，但这里有一个使用您已有的解决方案。通过从现有代码中删除float: left，我们可以获得所需的结果。

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

.social {
  display: inline-block;
  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 5

保留您当前的代码，只需删除 flex: left: (JSFiddle example):

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

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

如果基于您的browser compatibility requirements，您可以负担得起使用display: flex; (MDN)，那么这是最简单的方法（jsfiddle example）：

.contain {
  display: flex;
  justify-content: center;
}

.social {
  padding: 10px;
}

这里有一个很棒的 flexbox 教程：flexbox froggy。浮点数很奇怪，我个人觉得 flex 更直观。