Question

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

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

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

Answer 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

Answer 2

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

display：旧版浏览器中的表属性

2 个答案: