CSS - div的垂直對齊列表項

Question

我想平均分配幾個div。所以，我發現這個鏈接：

How do I distribute items horizontally with CSS?

這解釋瞭如何使用無序列表做到這一點。這需要處理水平分佈。

現在，當我爲每個div添加不同文本和樣式的文本時，它們不會相互垂直對齊。似乎每個div中最後一行文本的底部與eachother對齊，而不是div的最後一行。

這裏是我的小提琴：http://jsfiddle.net/3jxV7/1/

如何我剛剛得到的div垂直彼此對齊，不管我有這些div中的哪些內容？

爲了方便，假設我所有div具有相同的尺寸：

div.foo 
{ 
    width:100px; 
    height:100px; 
    background:cyan; 
} 

Answer 1

添加這個屬性在你的CSS

li 
{ 
    vertical-align:middle; 
} 

觀看演示http://jsfiddle.net/3jxV7/2/

如果您希望垂直內部的文本也對齊，然後將其添加到您的CSS

div.foo 
{ 
    display:table-cell; 
    vertical-align:middle; 
} 

觀看演示http://jsfiddle.net/3jxV7/4/