Question

我正在尝试将三个图像连续居中，然后以页面为中心。我已经把它们连成了所有但我无法让它们居中。关于让我的小组进入中间的任何建议？我在包含类和社交类上尝试了0 auto。很近！！

我的HTML：第一件事是div class = contains来包装整个事情，但出于某种原因，如果我尝试在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元素占用的区域：

＆＃13;
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！：）

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

＆＃13;

.contain {
     max-width:960px;
     text-align:center;
  }

 .social {
 position:relative;
 display: inline-block;
 padding: 10px;
 }

＆＃13;

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

＆＃13;

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。浮动很奇怪，我个人觉得弯曲更直观。

3个图像以一排为中心

5 个答案:

HTML

CSS