显示：旧浏览器中的表格属性答案

【问题标题】：display: table property in older browsers显示：旧浏览器中的表格属性
【发布时间】：2013-02-20 23:18:36
【问题描述】：

为了垂直对齐动态文本，我使用span 标记和display: table-cell 属性。它由div 和display: table 属性包装，并且它的工作方式应该如此。

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

除了使用真正的html表格之外，还有更简单的解决方案吗？

【问题讨论】：

描述“垂直对齐”？
@Liam 检查the MDN reference.
@Barney 我在下面考虑詹姆斯的方法。可能有更好的方法来做他想做的事情，但我不知道，因为我不知道他在做什么......如果它不是一张桌子，它不应该使用表格布局！
@Liam James 的方法做出了表格布局不需要处理的各种假设和要求（依赖于指定的高度，不能扩展以适应可变内容等）。您可能认为不应使用 display: table - 但它存在，具有其他技术无法解释的独特属性，是 OP 所要求的，并且已记录支持。
display:table 和 display:table-cell 的组合在一些文本需要垂直居中在框的中间时提供了方便的解决方案。文本具有动态长度，例如它有时适合一排，有时适合三行，但始终垂直位于框的中心/中间。我只是不知道为什么它在低于 10 的 firefox 版本中不起作用...

标签： html css firefox vertical-alignment

【解决方案1】：

display:table-cell 不是垂直对齐的全部和结束。单独使用 CSS 仍然可以轻松实现垂直对齐。

你需要三样东西：

具有特定高度的包含分隔器（流体或静态，没关系）。
相对定位的“填充”分隔线，高度为 50%。
要垂直对齐的内容的容器。

不过，您需要知道内容容器的确切高度。

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 example.

【讨论】：

当文本始终保持相同高度时，这可以正常工作，但是当您有较长的文本被分成几行时，它不会垂直居中在父容器的中间。
这就是为什么我提到你需要知道容器的确切高度。如果文本不会更改，请指定line-height。你的总高度是line-height * number of lines。如果文本可能会更改，您需要使用 JavaScript 计算内容容器的 outer height 并将其 margin-top 属性设置为该值的一半。

【解决方案2】：

根据 display 属性的 MDN 参考，table 通过 CSS has been supported since Firefox version 1 显示。你应该没事！

【讨论】：

说你更大的问题是IE！
@Liam 是的，但 OP 的问题是关于 Firefox。
我没有回答.. 你是对的。问题是 Firefox 9 和更早的版本不应用这个属性，除了直接/第一个孩子..