DIV實現垂直居中對齊的方法

2021-05-23 09:33:08 字數 798 閱讀 5632

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

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

body body,html

#outer

#outer[id]

#middle /* for explorer only*/

#middle[id]

#inner /* for explorer only */

div.greenborder

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

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

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

摘自:http://www.okajax.com/a/200903/030x3b2009.html

DIV和SPAN垂直居中對齊的實現方法

div和span如何垂直居中對齊,水平居中很簡單,設定text align center就可以了。水平居中很簡單,設定text align center就可以了,但是垂直居中一直都不得其解!以前總是嘗試著調padding top,但是有的時候好使,更多的時候不行,今天同樣,當height值不大時,增...

div內容垂直居中對齊

css垂直居中屬性設定vertical align middle對div不起作用,例如 在div中垂直居中 執行後按鈕沒有在div中垂直居中 解決思路 如果div和按鈕的寬高都確定為具體畫素值,可以直接設定按鈕的css屬性 position relative top為 div.height butt...

div垂直居中的方法

定義上下左右為0,margin auto,實現脫離文件流的居中 css div1 div2 html div1 div2 margin auto法 margin負值法 設定父元素的display table cell,並且vertical align center,這樣可以讓子元素的div實現垂直居...