对齐一个浮动:左div居中？
对齐一个浮动:左div居中？
提问于 2011-04-02 22:09:32
我想要在页面上水平显示一组图像。每个图像下面都有几个链接，所以我需要在每个图像/链接组周围放置一个容器。
我得到的最接近我想要的是把它们放在div中，这个div是浮动的:left。问题是我希望容器居中对齐，而不是向左对齐。我如何才能做到这一点。
回答 7
Stack Overflow用户
回答已采纳
发布于 2011-04-02 22:12:15
使用display:inline-block;而不是float
你不能使浮动居中，但是内联块居中，就像它们是文本一样，所以在你的“行”的外部整体容器上，你可以为每个图像/标题容器(它是inline-block;)设置text-align: center;，然后如果你需要的话，你可以把文本重新对齐到左边
Stack Overflow用户
发布于 2014-11-24 23:39:18
CSS Flexbox is well supported这几天。Go here提供了一个关于flexbox的很好的教程。
这在所有较新的浏览器中都工作得很好：
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.block {
width: 150px;
height: 150px;
background-color: #cccccc;
margin: 10px;
}<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>
有些人可能会问为什么不使用display: inline-block？对于简单的事情，这是很好的，但如果你在块中有复杂的代码，布局可能不再正确居中。Flexbox比float left更稳定。
Stack Overflow用户
发布于 2011-04-02 22:15:02
像这样试一下：
<div id="divContainer">
<div class="divImageHolder">
IMG HERE
</div>
<div class="divImageHolder">
IMG HERE
</div>
<div class="divImageHolder">
IMG HERE
</div>
<br class="clear" />
</div>
<style type="text/css">
#divContainer { margin: 0 auto; width: 800px; }
.divImageHolder { float:left; }
.clear { clear:both; }
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5523632
复制相关文章
相似问题