未知高度圖片的垂直置中

在流行用TABLE製作網頁布局的時代裡，讓某個未知高度的圖片垂直置中是非常簡單的事情，儲存格標籤td的valign屬效能可以輕鬆實現這個效果。但在DIV+CSS的布局下，這個問題卻變得棘手。

CSS:

div{width:300px;height:300px;line-height:300px;vertical-align:middle;border:1px solid red;}
img{width:50px;height:50px;vertical-align:middle;}

HTML:

<div><img src=”http://www.i-gen.cn/” alt=”HTML構築了我的世界，CSS裝飾了我的人生，SEO升華了我的夢。” /></div>

在以上代碼中，我們將一個寬度和高度均為50像素（小於容器高度即可）的圖片被放入一個邊長300像素且行高也為300像素的正方形容器裡。眾所周 知，為區塊層級元素設定一個與高度（height）一致的行高（ling-height）配合使用vertical-align:middle就可以實現文本 的垂直置中，但實際情況讓我們大失所望，圖片依舊位於容器的左上方。

看來單純的設定行高和垂直對齊並不起作用，以下我常用的實現方法：

CSS:

div{width:300px;height:300px;line-height:300px;vertical-align:middle;border:1px solid red;display:table-cell;*display:block;*font-size:263px;}
img{width:50px;height:50px;vertical-align:middle;}

HTML:

<div><img src=”http://www.i-gen.cn/” mce_src=”http://www.i-gen.cn/” alt=”HTML構築了我的世界，CSS裝飾了我的人生，SEO升華了我的夢。” /></div>

display:table-cell屬性可以使DIV容器作為表格儲存格顯示，但是IE6/7並不支援table-cell，所以這裡用到了兩個IE專屬的CSS HACK，*display:block;*font-size:263px。這個解決方案的關鍵在於*font-size:263px，在height與font-size比值為1.14左右時IE可實現垂直置中。