旧浏览器中的Display: table属性

Question

为了垂直对齐动态文本，我使用span标记和display: table-cell属性。它被具有display: table属性的div包裹，并且工作正常。

但问题是这在旧版本的firefox中不起作用。不幸的是，我需要支持firefox 7及更高版本。

有更简单的解决方案，除了使用真正的html表?

Answer 1

display:table-cell不是垂直对齐的全部。垂直对齐仍然可以很容易地实现单独的CSS。

你需要三样东西:

1. 具有特定高度的包含分隔符(流体或静态，无关紧要)。
2. 一个相对位置的"padding"分隔符，高度为50%。
3. 你想要垂直对齐的内容的容器。

你需要知道你的内容容器的确切高度，然而。

div#container {
    height:500px;
}
div#paddingDivider {
    height:50%;
}
div#contentContainer {
    margin:0 auto; /* Centrally align the element */
    height:100px; /* Declare the exact height of the element */
    margin-top:-50px; /* Position half of the element inside the padding divider */
}

JSFiddle例子。

Answer 2

根据display属性的MDN参考，从Firefox版本1开始就支持通过CSS显示table。你应该没事的!