代码之家 › 专栏 › 技术社区 › Emigriff

以一行为中心的3个图像

inline image css html

Emigriff · 技术社区 · 7 年前

我试着让三个图像在一行中居中,然后在页面上居中。我把它们排成一行,但我不能把它们放在中间。有什么建议可以让我的团队走到中间吗?我在contain类和social类上尝试了0 auto。太近了!!

我的HTML:第一件事是div class=contain来包装整个内容,但由于某种原因,如果我试图在HTML中包含类contain,它会在堆栈溢出时显示,所以请原谅。

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

5 回复 | 直到 7 年前

Obsidian Age 7 年前

我的建议是利用 flexbox 元素的容器。

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

注意,您还需要设置 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>

Void Spirit 6 年前

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

Hartanto 7 年前

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

Brett DeWoody 7 年前

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

Sara M 7 年前

保留当前代码,只需删除 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 . 浮动非常奇怪,我个人觉得弯曲更直观。