使用CSS垂直居中多个盒子

Question

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

由于这些盒子是包含不同文本内容的变量，因此我不知道它们的高度。

如何使用CSS实现这一点（不需要使用td和valign）？尝试使用display：table-cell，但它似乎不兼容IE。

下面的图像显示了设计，便利贴是浏览器窗口。

- Victor

---

你想要盒子有多宽？ - Josef Pfleger

Answer 1

不太优雅，但是可行的做法。创建一个单元格表格。只有表格具有跨浏览器的垂直对齐功能。

- Dewfy

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;
}

< p > inline-block 属性在大多数现代浏览器中都可以使用。 点击此处 了解更多信息。

- Josef Pfleger

---

这基本上是正确的做法。但是，如果您将这三个元素更改为<span>而不是<div>，那么即使在IE6上也可以实现兼容性！对于Firefox 2（如果需要），您可以添加display:-moz-inline-box。 - DisgruntledGoat