2011年11月21日 星期一

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 解決方法

這個 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以外的瀏覽器,相當正常

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。

沒有留言:

張貼留言