CSS Hack-處理“未知圖片垂直居中”的CSS樣式

CSS Hack-分享以及推薦一種處理“未知圖片垂直居中”的CSS樣式

在介紹這種新的hack之前，先回顧一下我曾經用過的一個css hack，目的當然同樣是對未知高度的圖片進行垂直居中處理。

方法一，用一個庸余標簽協助實現垂直居中

<div class="box-c"><img src="images/pic170x133.gif" alt="" /><span class="box-c-fix"></span ></div>

代碼

#imgDemo1 .box-c{height:300px;text-align:center;}
#imgDemo1 .box-c img{display:inline;vertical-align:middle;}
#imgDemo1 .box-c-fix{display:-moz-inline-box!important;display:inline-block;vertical-align:middle;height:100%;}

這種方式需要增加一個庸余的空標簽span.box-c-fix，另外試試將span換成塊元素div，是不是居中實效？沒辦法ie就是這么傻叉。。。

友情提示：img和span.box-c-fix之間最好不要有文字或者空格，否則ie下可能出現居中失效。

方法二，新的hack，推薦大家測試使用

<div class="box-c"><img src="images/pic170x133.gif"alt="" /></div>

代碼

/* 垂直居中-*font-size需根據具體高度算 */

.box-c{

/* 非ie的主流瀏覽器識別的垂直居中 */

display: table-cell;

vertical-align:middle;

/* 設置水平居中 */

text-align:center;

/* 針對惡心的IE的HACK */

*display: block;

*font-size: 148.41px; /* 神的hack,人類目前無法解釋。約為高度的0.873~0.877,如170*0.873=148.41 */

*font-family:Arial; /* 防止非utf-8引起的hack失效問題,如gbk編碼 */

/* 高寬 */

width:170px;

height:170px;

}

.box-c img {

/* 設置圖片垂直居中 */

vertical-align:middle;

/* 注:block會破壞居中,另外請防止別的樣式覆蓋 */

display:inline-block;/* inline也行 */

}