|
方法二 (XHTML 1.0 transitional)：
方法二和方法一的實現(xiàn)的原理大同小異，結(jié)構(gòu)也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。
CSS樣式部分：
<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*針對IE6/7的Hack*/
top:50%; /*針對IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*針對IE6/7的Hack*/
top:-50%;left:-50%; /*針對IE6/7的Hack*/
border:1px solid #ccc;
}
</style>
該方法有個弊端，在標準瀏覽器下由于外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，并且在IE8下設(shè)置邊框也無效。
方法三 (XHTML 1.0 strict)：
標準瀏覽器還是將外部容器#box的顯示模式設(shè)置為display:table-cell，IE6/IE7是利用在img標簽的前面插入一對空標簽的辦法。
HTML結(jié)構(gòu)部分：
<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>
CSS樣式部分：
<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->
方法三也同樣適用XHTML 1.0 transitional。以上方法都是收集于藍色理想，暫時只對這3個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。
思考：很多方法都是依賴于將外部容器的顯示模式設(shè)置成table才能實現(xiàn)垂直居中，也就是div來模擬table，如果CSS有一個屬性來實現(xiàn)這種效果那該多好。如果你也有好的方法，歡迎你來分享。
原文：http://stylechen.com/img-middle.html
本文鏈接：http://www.95time.cn/tech/web/2010/8176.asp 
出處：
責任編輯：bluehearts
上一頁 未知高度的圖片垂直居中 [1] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 未知高度的圖片垂直居中 [2]
