Измельчающиеся предметы по горизонтали w/выравнивание по центру внутри контейнера

Question

Моя дилемма - это (и должно быть просто, я подозреваю): у меня есть контейнер и набор предметов (оба divs). Следующий CSS применяется:

.container { 
    float:   left; 
    width:   100%; 
} 


.item { 
    margin:   32px; 
    text-align:  center; 
    position:  relative; 
    float:   left; 
} 

сама .item является контейнером, который может иметь практически любой набор произвольных элементов, но они должны быть выровнен по центру внутри него (в моем случае, как правило, содержит уменьшенное изображение и небольшой заголовок текста под ним). В то время как вышеприведенный CSS позволяет каждому элементу проходить горизонтально, как мне нравится, я не могу понять, как сделать выравнивание всей сетки (в отличие от текущей слева направо, как сейчас).

Answer 1

редактировать
Изменение .item { display: block; } в .item { display: inline-block; }, заберите .item { float:left; } и добавить text-align: center; к .container

Вы можете увидеть здесь: http://jsfiddle.net/JMC_Creative/RQrRb/

Вы также можете положить .inner DIV с width:75%; margin: 0 auto;, а затем положить ваши .item s в , что, если вы ищете место на боках.

Answer 2

Вы хотите взглянуть на этот учебник от Mozilla. Это может быть выровнен по центру, просто установив родительский контейнер для text-align:center;

Cross Browser Inline Block

Answer 3

.container {
width: 100%;
}

.item {
margin: 32px;
text-align: center;
}