方法一 (XHTML 1.0 transitional):
該方法是將外部容器的顯示模式設(shè)置成display:table,img標簽外部再嵌套一個span標簽,并設(shè)置span的顯示模式為display:table-cell,這樣就可以很方便的使用vertical-align象表格元素那樣對齊了,當然這只是在標準瀏覽器下,IE6/IE7還得使用定位。
HTML結(jié)構(gòu)部分:
<div id="box">
??? <span><img src="images/demo.jpg" alt=""></span>
</div>
?
CSS樣式部分:
<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->
?
方法二 (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,所以導(dǎo)致#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]-->
網(wǎng)頁題目:圖片真正居中的方法
標題鏈接:http://m.rwnh.cn/news10/309210.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、用戶體驗、外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、品牌網(wǎng)站制作
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)