css 非表格垂直對齊效果代碼

2024-07-11 08:27:01

字體：大中小

供稿：網(wǎng)友

第一：相對定位和絕對定位

以下是一固定寬高的Div的垂直居中代碼

復制代碼

代碼如下:
div{
position:absolute;
top:50%; left:50%;
width:400px; height:400px;
margin:-200px 0 0 -200px;
border:1px solid #000000;
}

position:absolute，絕對定位，可以把這個div看成漂浮于這個頁面之上，通過top:50%和left:50%定位這個div的位置，但這個時候，垂直與水平居中的是這個div左上角這一點。所以，要讓這個div的中心點位于整個頁面的中間，需要使用負邊界，負的上邊界，負值是高度的一半；負的左邊界，負值是寬度的一半。即達到效果。
如果是不定寬高的Div，則需要再多嵌套兩個Div，需要對CSS的定位概念仔細理解。

第二：不同的DISPLAY方式

Div不是表格，但是當代的瀏覽器中除了IE都支持display:table-cell。恰好，IE支持dispaly:inline-block，那么我們就用兩種方式為當代瀏覽器實現(xiàn)非表格的垂直居中，殊途同歸。

HTML如下：

復制代碼

代碼如下:
<div id="div1">blah blah...看見我居中了嗎？</div>
<div id="div2">
<p>blah blah...</p>
....
</div>

CSS如下：

復制代碼

代碼如下:
#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}

我們來重點分析CSS。如您所知，*property是一個只有IE（包括IE7）才能解析的hack. 那么為何是inline而不是inline-block呢？這跟IE的變態(tài)工作方式有關，具體不深究。在此你只需知道加上zoom:1后，就等價于inline-block。另外，如果是a, span等非block的元素，則按正常方式display:inline-block。

上一篇：IE下行框高度的問題

下一篇：css 行級元素在多瀏覽器下的寬度問題與解決方法