三、固定高度的多行文字垂直居中

這種方法比較復(fù)雜，我也會詳細(xì)說明的。下面還是先看代碼：

方法：

（1）vertical-align:middle; display:table-cell。這種方法的意思是：將對象強制轉(zhuǎn)換為Table，vertical-align:middle的作用和表格中的valign="center"相同。

本來是很方便的一個屬性，但IE不支持這個屬性。為了使各瀏覽器兼容，我們不得不想其他的方法。

（2）在對象內(nèi)建立一個子對象，并在子對象內(nèi)再建立一個子對象或段落。網(wǎng)頁中：

<div id="a"><div><p>這里具有多行文字，高度是50px這里具有多行文字，高度是50px</p></div></div>

CSS中：

p {margin:0;}：因為在FireFox中默認(rèn)P是有間距的

#a {height:50px;position:relative;}：設(shè)置高度50，如果要是子對象相對它定位，則要設(shè)置position:relative

#a div {*position:absolute;*top:50%;}：前面加星號“*”只有IE支持，其他瀏覽器會忽略此設(shè)置。position:absolute設(shè)置了此子對象的定位為絕對定位，top:50%設(shè)置了顯示在距頂端50%的位置，即25px（因為上面設(shè)置了父對象的高度為50px）。

#a div p {*position:relative;*top:-50%;}：這段代碼只能先理解為向上移動剩下高度的50%。因為top設(shè)置了負(fù)值，相當(dāng)于向相反的方向移動。

說明：支持主流瀏覽器（在IE6，F(xiàn)ireFox2下測試）。

最新評論