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...