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

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

方法：

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

本來(lái)是很方便的一個(gè)屬性，但I(xiàn)E不支持這個(gè)屬性。為了使各瀏覽器兼容，我們不得不想其他的方法。

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

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

CSS中：

p {margin:0;}：因?yàn)樵贔ireFox中默認(rèn)P是有間距的

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

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

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

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

最新評(píng)論