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/