日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器( 三 )

云知道


div#content{


border:1pxsolid#000;


position:relative;


top:-50%;
}br/pre
/div
/div
/div
/body
/html


五、完美的解決方案
那么我們綜合上面兩種方法就可以得到一個完美的解決方案，不過這要用到CSS hack的知識 。
CSS Code復(fù)制內(nèi)容到剪貼板
div#wrap{
display:table;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content{
_position:relative;
_top:-50%;


}


至此，一個完美的居中方案就產(chǎn)生了 。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
html
head
　title多行文字實現(xiàn)垂直居中/title
　metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
styletype=text/css
body{font-size:12px;font-family:tahoma;}
div#wrap{
display:table;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content{
_position:relative;
_top:-50%;
}
/style
/head
body
divid=wrap
divid=subwrap
divid=contentbr
pre現(xiàn)在我們要使這段文字垂直居中顯示！
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}
div#content{
border:1pxsolid#000;
position:relative;
top:-50%;
}br/pre
/div


/div
/div
/body
/html


PS:垂直居中vertical-align的值是middle，而水平居中align的值是center，雖然同是居中但關(guān)鍵字不同 。

六、實測可以完美實現(xiàn)各種瀏覽器兼容的居中方案
下面這段代碼經(jīng)過實測，可以完美兼容IE7以上的IE瀏覽器，其它標(biāo)準(zhǔn)瀏覽器如火狐、谷歌等也沒有問題 。

說明：盡管有CSS的vertical-align特性，但是并不能有效解決未知高度的垂直居中問題（在一個DIV標(biāo)簽里有未知高度的文本或圖片的情況下） 。標(biāo)準(zhǔn)瀏覽器如Mozilla, Opera, Safari等.，可將父級元素顯示方式設(shè)定為TABLE(display: table;)，內(nèi)部子元素定為table-cell (display: table-cell),通過vertical-align特性使其垂直居中，但非標(biāo)準(zhǔn)瀏覽器是不支持的 。非標(biāo)準(zhǔn)瀏覽器只能在子元素里設(shè)距頂部50%，里面再套個元素距頂部-50% 來抵消 。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
!doctypehtml
html
head
metacharset=utf-8
title水平垂直居中/title
styletype=text/css
body{padding:0;margin:0;}
body,html{height:100%;}
#outer{height:100%;overflow:hidden;position:relative;width:100%;}
#outer[id]{display:table;position:static;}
#middle{position:absolute;top:50%;}/*forexploreronly*/
#middle[id]{display:table-cell;vertical-align:middle;position:static;}
#inner{position:relative;top:-50%;margin:0auto;}/*forexploreronly*/
div.greenBorder{width:500px;height:584px;background:#333;}
* html#outer[id]{position:relative;}
* html#middle[id]{position:absolute;}
/style


/head
body
divid=outer
divid=middle
divid=innerclass=greenBorder
/div
/div
/div
/body


/html


以上CSS代碼的優(yōu)點是沒有hacks，采用了IE不支持的CSS2選擇器#value[id] 。

推薦閱讀