CSS解決未知高度垂直居中

2022-02-18 12:41:01 字數 809 閱讀 2060

vertical centering in css

儘管有css的vertical-align特性,但是並不能有效解決未知高度的垂直居中問題(在乙個div標籤裡有未知高度的文字或的情況下)。

標準瀏覽器如mozilla, opera, safari等.,可將父級元素顯示方式設定為table(display: table;) ,內部子元素定為table-cell (display: table-cell),通過vertical-align特性使其垂直居中,但非標準瀏覽器是不支援的。

非標準瀏覽器只能在子元素裡設距頂部50%,裡面再套個元素距頂部-50% 來抵消。

css

body

body,html

#outer

#outer[id]

#middle /* for explorer only*/

#middle[id]

#inner /* for explorer only */

div.greenborder

xhtml

以上css**的優點是沒有hacks,採用了ie不支援的css2選擇器#value[id]。

css2選擇器#value[id]相當於選擇器#value,但是internet explorer不支援這種型別的選擇器。同樣地.value[class],相當於.value,這些只有標準瀏覽器能讀懂。

測試:firefox1.5、opera9.0、ie6.0、ie5.0通過。

效果演示

CSS解決未知高度垂直居中

儘管有css的vertical align特性,但是並不能有效解決未知高度的垂直居中問題 在乙個div標籤裡有未知高度的文字或的情況下 標準瀏覽器如mozilla,opera,safari等.可將父級元素顯示方式設定為table display table 內部子元素定為table cell dis...

CSS解決未知高度垂直居中

儘管有 css 的 vertical align 特性,但是並不能有效解決未知高度的垂直居中問題 在乙個 div 標籤裡有未知高度的文字或的情況下 標 準瀏覽器如 mozilla,opera,safari 等.可將父級元素顯示方式設定為 table display table 內部子元素定為 tab...

CSS解決未知高度垂直居中

vertical centering in css 儘管有css的vertical align特性,但是並不能有效解決未知高度的垂直居中問題 在乙個div標籤裡有未知高度的文字或的情況下 標準瀏覽器如mozilla,opera,safari等.可將父級元素顯示方式設定為table display t...