在舊版瀏覽器中顯示：表格屬性

爲了垂直對齊動態文本，我使用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

在舊版瀏覽器中顯示：表格屬性

回答

相關問題