连续3张图像居中 [英] 3 images centered in a row

问题描述

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

I am trying to have three images centered in a row and then centered on the page. I've got them all in a row but I cannot get them centered. Any suggestions on getting my group to the middle? I tried 0 auto on the contain class and on the social class. so close!!

我的HTML:第一件事是div class = contain，将整个内容包装起来，但是由于某些原因，如果我尝试在HTML中包含该类包含，则它会在Stack Overflow上消失，所以请原谅.

My HTML: first thing is div class=contain to wrap the whole thing, but for some reason if I try to include the class contain in HTML it disppears on Stack Overflow so excuse that.

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

推荐答案

我建议使用的是

What I would recommend is to make use of flexbox container for the elements.

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

With flexbox, all you need is three different styles in order to centralise elements both horizontally and vertically:

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

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

请注意，您还需要设置 c6> ，以便元素可以实际填充垂直空间.

Note that you'll also need to set a height on the container, so that the elements can actually fill the vertical space.

在下面可以看到，其中带有 <添加了c7> 来展示.container元素占用的区域:

This can be seen in the following, with a border added to showcase the area that the .container element occupies:

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

希望这会有所帮助！ :)

Hope this helps! :)

这篇关于连续3张图像居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！