Правильно центрирующие элементы с горизонтальной полосой прокрутки

Question

У меня есть список элементов div, которые отображаются горизонтальной полосой прокрутки.

Все элементы внутри этих дивы являются (по горизонтали) по центру, что хорошо, но они не выровнены правильно

У меня есть следующая структура

<div> 
    <div> 
    <img /> 
    <p /> 
    </div> 
    <div> 
    <img /> 
    <p /> 
    </div> 
</div> 

http://jsfiddle.net/kSnq4/

Если посмотреть на jsFiddle вы увидите, в чем проблема. Все элементы должны быть выровнены сверху.

Я делаю это правильно? Если да, то что я должен сделать, чтобы исправить это?

Answer 1

Вам нужно добавить vertical-align: top; к вашим элементы списка. Также добавьте overlfow-y: hidden; в .templateList, если вы хотите предотвратить вертикальную полосу прокрутки.

.templateList .listItem{ 
    width:120px; 
    text-align:center; 
    display:inline-block; 
    vertical-align: top; 
} 

DEMO

Answer 2

Вы можете использовать vertical-align: top;, так как вы используете дисплей: встроенный блок;

Пример: http://jsfiddle.net/kSnq4/2/