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

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

方法：

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

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

（2）在對象內建立一個子對象，并在子對象內再建立一個子對象或段落。網頁中：

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

CSS中：

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

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

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

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

說明：支持主流瀏覽器（在IE6，FireFox2下測試）。

最新評論