CSS - 将包装的浮动div对齐到中心

时间:2013-07-26 08:37:07

标签: css css3 css-float

我正在尝试创建类似于图库的内容,根据浏览器的宽度显示每行不同数量的图像。使用外部div中的overflow: hidden和内部div中的float: left已经实现了这一点。

然而,这会发生的是我的图像始终与左边对齐,在右边留下了很多空白。如何使画廊始终在屏幕中居中,无论每行有多少图像。

我的代码在http://codepen.io/anon/pen/KzqAs

非常感谢你。 :)

2 个答案:

答案 0 :(得分:2)

这个怎么样:http://codepen.io/anon/full/mtBbF

<强> HTML

<div class="container">
  <div class="red box">red</div>
  <div class="blue box">blue</div>
  <div class="black box">black</div>
</div>

<强> CSS

body{
  text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
  display: inline-block;
  margin: 0 auto;
  text-align: left;
}
.box {
  width: 300px;
  height: 300px;
  float: left;
}

答案 1 :(得分:0)

Demonstration

您需要在主div上使用id(或类)。设置width: 300+px and margin: auto 你的盒子也应该是display: inline-block,以允许它们“内联” 为了更好的可见性,我已经改变了盒子的颜色。