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

Question

我正在尝试创建类似于画廊的东西，根据浏览器的宽度显示每行不同数量的图像。这已经overflow: hidden在外部 div 和float: left内部 div 中实现。

然而，随之而来的是我的图像总是向左对齐，在右边留下了很多空白。无论每行有多少图像，如何使画廊始终位于屏幕中央。

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

非常感谢。:)

Answer 1

这个怎么样： 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;
}

Answer 2

示范

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