網頁設計中未知高度的非表格垂直對齊

非已知高度的垂直對齊的條件： 網頁設計的表格單格 行內塊（inline-block） 第一個比較好理解，第二個很多人可能會忽略。比如，很多人在圖片與文本混排的時候想讓圖片相對于文本垂直居中除了用IE的私有特性 valign="absmiddle"別無他法。記住，預設下圖片就是屬於inline-block，你只需簡單的img {vertical-align:middle;}即可。 那麼，我們進入主題。現在我們Web Design由於某些特殊需要兩個並排的div想實現垂直居中。如前所述，div非表格，但是當代的流覽器中除了IE都支持display:table-cell。恰好，IE支持dispaly:inline-block，那麼我們就用兩種方式為當代流覽器實現非表格的垂直居中，殊途同歸。 HTML如下： blah blah...看見我居中了嗎？ blah blah... .... CSS如下： #div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;} 我們網頁設計來重點分析CSS。如您所知，*property是一個只有IE（包括IE7）才能解析的hack. 那麼為何是inline而不是inline-block呢？這跟IE的變態工作方式有關，具體不深究。在此你只需知道加上zoom:1後，就等價於inline-block。另外，如果是a, span等非block的元素，則按正常方式display:inline-block。