使用CSS垂直居中多个框

Question

我需要垂直居中多个不同高度的盒子。

我不知道盒子的高度，因为它们是可变文本。

如何使用CSS（无需使用td和valign）。试过display: table-cell但似乎与IE不兼容

下图显示了设计，后贴片是浏览器窗口

删除了死亡的ImageShack链接

Answer 1

不那么优雅，但有效。创建单细胞表。只有表格具有跨浏览器垂直对齐。

Answer 2

假设您希望盒子是固定宽度的，您可以使用以下标记

<div class="vcontainer">
    <span>1<br/>2</span>
    <span>1<br/>2<br/>3<br/>4</span>
    <span>1<br/>2<br/>3</span>
</div>

使用这些样式

.vcontainer {
    text-align: center;
}

.vcontainer span {
    display: inline-block;
    width: 150px;
    vertical-align: middle;
}

inline-block属性works in most modern browsers。