|
非已知高度的垂直對齊的條件：
- 表格單元格
- 行內(nèi)塊（inline-block）
第一個比較好理解，第二個很多人可能會忽略。比如，很多人在圖片與文本混排的時候想讓圖片相對于文本垂直居中除了用IE的私有特性 valign="absmiddle"別無他法。記住，默認下圖片就是屬于inline-block，你只需簡單的img {vertical-align:middle;}即可。
那么，我們進入主題�，F(xiàn)在我們由于某些特殊需要兩個并排的div想實現(xiàn)垂直居中。如前所述，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)工作方式有關(guān)，具體不深究。在此你只需知道加上zoom:1后，就等價于inline-block。另外，如果是a, span等非block的元素，則按正常方式display:inline-block。
例子：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
本文鏈接：http://www.95time.cn/tech/web/2007/4629.asp 
出處：Realazy
責任編輯：moby
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
