对齐浮点数:左边div到中心？

Question

我希望在页面上水平显示一组图像.每个图像下面都有一些链接,所以我需要在每个图像/链接组周围放置一个容器.

我最接近我想要的是将它们放在浮动的div中:left.问题是我希望容器对齐中心而不是左侧.我怎样才能做到这一点.

Answer 1

使用display:inline-block;而不是浮动

你不能居中花车,但直列块中心,好像他们是文本,所以你的"行"外容器整体上-你会设置text-align: center;然后为每个图像/标题容器(这是那些会inline-block;),你可以重新 - 如果需要,将文本对齐

Answer 2

我们现在生活在2018年,CSS Flexbox得到了很好的支持.到这里获取有关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比浮动更稳定.

Answer 3

试试这样:

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

Answer 4

只需将浮动元素包装在一个<div>并给它这个CSS:

.wrapper {

display: table;
margin: auto;

}