3张图片居中排列

Question

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

我的 HTML：首先是 div class=contain 来包装整个东西，但出于某种原因，如果我尝试将 class 包含在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，您只需要三种不同的样式即可水平和垂直集中元素：

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

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

也许你可以编辑 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 3

使用 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 4

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 5

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

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

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

如果基于你的 browser compatibility requirements you can afford to use display: flex; (MDN) then that's the easiest way (jsfiddle example):

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

.social {
  padding: 10px;
}

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

3张图片居中排列

3 images centered in a row

html

css

inline

image

html

css