CSS - div 作为列表项的垂直对齐方式

Question

我想水平均匀分布几个 div。所以我找到了这个链接:

How do I distribute items horizontally with CSS?

其中解释了如何使用无序列表进行操作。这会处理水平分布。

现在，当我向这些 div 中的每一个添加不同的文本和文本样式时，它们不会彼此垂直对齐。似乎每个 div 中最后一行文本的底部相互对齐，而不是 div 的最后一行。

这是我的 fiddle :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/