雖然Div布局已經基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有長處。比如表格布局中的垂直居中就是Div布局的一大弱項,不過好在千變萬化的CSS可以靈活運用,可以制作出準垂直居中效果,勉強過關。 要讓div中的內容垂直居中,無非有以下幾種方法,等我一一列舉:
如果要垂直居中的只有一行或幾個文字,那它的制作最為簡單,只要讓文字的行高和容器的高度相同即可,比如:
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
這段代碼可以達到讓文字在段落中垂直居中的效果。
另一種方法和行高法很相似,它同樣適合一行或幾行文字垂直居中,原理就是利用padding將內容垂直居中,比如:
p { padding:30px; }
這段代碼的效果和line-height法差不多。
顧名思義,定位法是利用CSS定位屬性position對元素進行定位的方法,也屬于模擬方法,不過它對IE的支持還是不錯的。 它的Html代碼為:
<div id="box"> <div id="sub"> <div id="content">垂直居中</div> </div> </div>
這段代碼比上一種方法中多出了一個名為sub的Div,它的作用是用來定位,原理就是:首先讓box出于相對定位,sub相對box出于相對定位,位于box垂直方向的50%,從而制作出content在box中垂直居中的效果,它們的CSS代碼如下:
<html>
<head>
<style>
#box {
border:1px solid #000; background:#F00; width:400px; height:400px; position:relative;
}
#subwrap {
position:absolute; top:50%;
}
#content {
border:1px solid #000;color:#FFF;
}
</style>
</head>
<body>
<div id="box">
<div id="subwrap">
<div id="content">dddd</div>
</div>
</div>
</body>
</html>
這段代碼無論是在IE中還是Firefox中,都能正常居中了。 當然,肯定還有許多垂直居中的方法,歡迎各位朋友交流補充。
#example{color:red ;}/*firefox*/
*html #example{color:blue;}/*ie6*/
*+html #example{color:green;}/*ie7*/
</style>
</head>
<body>
<div id="example">在FireFox下應為紅色,在IE6.0下應為藍色,在IE7.0下應為綠色。</div>
</body>
</html>
區別IE6與FF:
background:orange;*background:blue;
區別IE6與IE7:
background:green !important;background:blue;
區別IE7與FF:
background:orange; *bac IT人才網(http://it.ad0.cn) kground:green;
區別FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
www.ad0.cn
注:IE都能識別*;標準瀏覽器(如FF)不能識別*;
IE6能識別*,但不能識別 !important,
IE7能識別*,也能識別!important;
FF不能識別*,但能識別!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
--------------------------------------------------------------------------------
另外再補充一個,下劃線"_",
IE6支持下劃線,IE7和firefox均不支持下劃線。
于是大家還可以這樣來區分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;
注:不管是什么方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在最后面。