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

Question

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

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

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

无论我在这些 div 中包含什么内容，如何才能让 div 彼此垂直对齐？

为方便起见，假设我所有的 div 都具有相同的尺寸：

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

score 2 · Accepted Answer

在你的 CSS 中添加这个属性

li
 {
  vertical-align:middle;
 }

如果您希望文本内部也垂直对齐，请在您的 CSS 中添加它

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

1 回答 1