定心固定的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「容器」的中心。

在此先感謝。

Answer 1

我叉你的代碼，並提供此新樣本：http://codepen.io/anon/pen/zdLAw

我主要是去除冗餘代碼，並簡化了你的CSS選擇器：

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

實現定心最好的方法是使用margin屬性。把這個應用到你的div元素添加一些垂直間距，你就會得到你想要的。