用水平滾動條正確居中元素

Question

我有一個div元素列表，它們用水平滾動條顯示。

這些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;，因爲您使用的是display：inline-block;

一個例子：http://jsfiddle.net/kSnq4/2/