2

为了垂直对齐动态文本，我使用带有属性的span标签。它由with属性display: table-cell包裹，并且按应有的方式工作。divdisplay: table

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

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

4

2 回答 2

1

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

你需要三样东西：

  1. 具有特定高度的包含分隔器（流体或静态，没关系）。
  2. 一个相对定位的“填充”分隔线，高度为 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 示例。

于 2013-03-06T08:58:17.250 回答
0

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

于 2013-03-06T08:57:40.550 回答