在旧版浏览器中显示：表格属性

为了垂直对齐动态文本，我使用span标记和display: table-cell属性。它被div与display: table属性包围，它的工作原理应该如此。在旧版浏览器中显示：表格属性

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

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

来源

2013-03-06 swolfish

描述“垂直对齐”？ – Liam 2013-03-06 08:53:23

@Liam检查[MDN参考]（https://developer.mozilla.org/en-US/docs/CSS/vertical-align）。 – Barney 2013-03-06 08:55:20

@Barney我在考虑下面詹姆斯的做法。可能有更好的方法去做他想做的事情，但我不知道，因为我不知道他想做什么.....如果它不是桌子，它不应该使用桌子布局！ – Liam 2013-03-06 09:10:33

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

来源

2013-03-06 08:57:40 Barney

根据你的更大的问题是IE！ – Liam 2013-03-06 09:11:43

@Liam真的，但OP的问题是关于Firefox。 – Barney 2013-03-06 09:24:15

我没有回答..你说得对。问题是，Firefox 9和更早版本不适用这个属性，除了直接/第一个孩子.. – swolfish 2013-03-10 14:20:19

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。

来源

2013-03-06 08:58:17

这工作正常时，文本总是相同的高度，但是当你有更长的文本是分裂在几行它不是垂直居中在父容器中间。 – swolfish 2013-03-06 11:07:20

这就是为什么我提到你需要知道容器的确切高度。如果文字不会改变，请指定一个“行高”。你的总高度就是'线高*线数'。如果文本可能发生变化，则需要使用JavaScript来计算内容容器的“外部高度”，并将其“margin-top”属性设置为该值的一半。 – 2013-03-06 11:09:19

在旧版浏览器中显示：表格属性

回答

相关问题