Центрирования фиксированных дивы внутри плавающих дивы

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

Лучшим способ для достижения центрирования использует свойство маржи. Примените это к элементу div, добавьте несколько вертикальных интервалов, и вы получите то, что хотите.