在浮动div中居中固定div

Question

请参阅我的示例：

http://codepen.io/anon/pen/Ewrjh

<div id="container"></div>
<div id="box-container"></div>
<div id="box">test</div>
<div id="box">test</div>
<div id="box">test</div>
<div id="box">test</div>
</div>

#container {width:100%;}

#box-container{width:800px;float:left;margin-left:5%;margin-right:5%;}

#box {width:180px;margin: 2%;float:left;text-align:center;border:1px solid #ccc; display: inline-block;}

我想将4个div''框'置于div'容器'的中心。

提前致谢。

Answer 1

我分叉了您的代码，并在此处提供了一个新示例：http://codepen.io/anon/pen/zdLAw

我主要删除了cruft，并简化了你的css选择器：

.box {
  margin: 20px auto;
  padding: 10px;
  width: 180px;
  text-align: center;
  border: 1px solid #ccc;
}

实现居中的最佳方法是使用margin属性。将此应用于div元素添加添加一些垂直间距，您将获得所需的内容。