Fw: vertical-align 的 CSS 解決方法

http://atedev.wordpress.com/2007/10/19/vertical-align-%E7%9A%84-css-%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95/

vertical-align 的 CSS 解決方法

Posted on October 19, 2007 by ate

這個 IE6 ，實在是讓人吐血，今天，遇到了圖片水平垂直置中的問題，為了要製作看起來漂亮的相簿效果，不論相片是寬是長，是大是小，只要在一定的尺寸以內，都希望它能夠漂漂亮亮的置中；當然，這個相簿本身並不是以 <table> 呈現，而是用 <ul><li> 的列表方式來呈現，也就是說，我當然不能使用 vlaign="middle" 這種方式來做垂直置中。

其實 IE6 除外的瀏覽器，解決方法倒是很簡單，偏偏不能當作沒有 IE6 這個破爛貨，怎麼樣也得解決 IE6 這個惱人的死 BUG ，翻了一下國外的資料，大部分的都是用計算物件中心點的方式來做，但是相片的尺寸就沒有一定，鬼才會知道物件高度的一半是多少，這種方法，實在是對我一點幫助也沒有。

廢話那麼多，到底是解決了沒有？

當然還是解決了，不然我也不會平白寫這篇文章了，為了防止我的嚴重癡呆症發作，還是寫在這邊免得以後忘光光又要重想，煩哩！

先從 HTML 開始，下面是圖檔的 HTML ：

<ul class="album">
<li><div><img src="img/01.jpg"></div></li>
<li><div><img src="img/02.jpg"></div></li>
<li><div><img src="img/03.jpg"></div></li>
<li><div><img src="img/04.jpg"></div></li>
<li><div><img src="img/05.jpg"></div></li>
<li><div><img src="img/06.jpg"></div></li>
<li><div><img src="img/07.jpg"></div></li><li></li><li></li></ul>

下面是 CSS 的部份，也就是除了 IE6 以外都可以正常運作的水平垂直置中效果（足見IE6的痴呆程度）：

ul.album{list-style-type:none;padding:0px;clear:both;}
ul.album li{width:150px;height:150px;float:left;border:1px solid #FDDAB3;margin:2px;background-color:#FEF4DE;}
ul.album li div{width:150px;height:150px;
display:table-cell;text-align:center;vertical-align:middle;}

以上程式碼會產生如下的顯示：

●IE6以外的瀏覽器，相當正常

●IE6中風的樣子

我想HTML的部份就不用說明了，簡單說明一下CSS在這邊所用的技巧。重點在我們對圖片所加的div上面，display:table-cell 讓這個 div 變成類似td的東西出來，也就是說，使用這一招， vertical-align:middle 的屬性就可以在 IE6 以外的瀏覽器正確做到垂直置中的效果。

至於 IE6 ，為了治療 IE6 的痴呆，我們必須要在 HTML 當中加上無聊的 <span> 來幫助我們達到置中的效果：

<ul class="album">
<li><div><span></span><img src="img/01.jpg"></div></li>
<li><div><span></span><img src="img/02.jpg"></div></li>
<li><div><span></span><img src="img/03.jpg"></div></li>
<li><div><span></span><img src="img/04.jpg"></div></li>
<li><div><span></span><img src="img/05.jpg"></div></li>
<li><div><span></span><img src="img/06.jpg"></div></li>
<li><div><span></span><img src="img/07.jpg"></div></li>
<li></li><li></li></ul>

請注意，我們在<image>前面加上了<span></span>，中間不用放任何內容，因為我們要利用display:inline-block來欺騙使用者的眼睛，針對IE6來更改的CSS如下：

ul.album{list-style-type:none;padding:0px;clear:both;}
ul.album li{width:150px;height:150px;float:left;border:1px solid #FDDAB3;margin:2px;background-color:#FEF4DE;}
ul.album li div{width:150px;height:150px;display:table-cell;text-align:center;vertical-align:middle;}
ul.album li div * {vertical-align:middle;}

*html ul.album li div span{height:100%;display:inline-block;}

我們使用 ul.album li div * {vertical-align:middle;} 來幫助 div 以下的所有元素能夠做到垂直置中，接著的*html，其實是一行只有 IE6 會讀取的CSS hack技巧，我們讓笨笨的 IE6 把這串語法吃下去。請注意，不要傻傻的把這一行放到前面去，CSS這種東西，如果在後面讀到重複的屬性，會把較前面的屬性值給覆蓋掉，這是常識，千萬別忽略掉了！也就是說，在這一行 css hack 語法當中，我們做了display:inline-block 以及 height:100% 的設定，這樣一來，就連在 IE6 上面，也可以正常而且漂亮的置中了。

現在，你可以切換各種瀏覽器來觀看你要的相簿是否都正確顯示了！個人覺得，在影像尺寸是未知數的時候，這是一個解決垂直置中相當漂亮的的方法；雖然CSS排版技巧在跨瀏覽器的時候比起使用表格有比較多需要注意的地方，但是基於網頁效能以及後續維護和保持彈性上，我覺得解決跨瀏覽器的問題所付出的代價還是相當微小的，更重要的是，從這些過程當中，你也可以了解到各個瀏覽器不同的顯示問題，除了幫助你更加了解每個瀏覽器的特性之外，也可以獲得相當多的樂趣唷！（好吧！我自己是樂在其中啦！←變態）

這篇文章的原始參考資料是 Centering (horizontally and vertically) an image in a box ，但是我有針對我自己的需求做了修改，盡量做到簡潔並符合我的最低基本需求，如果需要更完整的資料，有興趣的人可以去原始網站參考一下原作者當初的idea。