亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css實(shí)現(xiàn)的讓圖片垂直居中的方法

  發(fā)布時(shí)間：2010-12-18 12:31:21   作者：佚名   我要評(píng)論
圖片的寬度和高度是未知的，沒有一個(gè)固定的尺寸，在這個(gè)前提下要使圖片在一個(gè)固定了寬度和高度的容器中垂直居中，想想感覺還是挺麻煩的，由于最近的項(xiàng)目可能會(huì)用到這個(gè)方案，所以把一些常用的方法都收集整理了一下。

下圖是理想中的效果圖，外部容器的寬度和高度是固定的，中間的圖片寬度和高度未知，但是圖片要始終要相對(duì)于外部的容器垂直居中。

但是實(shí)際中實(shí)現(xiàn)的效果并不是很完美，由于各瀏覽器的解析都各不相同，所以各瀏覽器都會(huì)有1px-3px的偏差。

方法一 (XHTML 1.0 transitional)：

該方法是將外部容器的顯示模式設(shè)置成display:table，img標(biāo)簽外部再嵌套一個(gè)span標(biāo)簽，并設(shè)置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對(duì)齊了，當(dāng)然這只是在標(biāo)準(zhǔn)瀏覽器下，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)：

方法二和方法一的實(shí)現(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; /*針對(duì)IE6/7的Hack*/
top:50%; /*針對(duì)IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*針對(duì)IE6/7的Hack*/
top:-50%;left:-50%; /*針對(duì)IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

該方法有個(gè)弊端，在標(biāo)準(zhǔn)瀏覽器下由于外部容器#box的顯示模式為display:table-cell，所以導(dǎo)致#box無法使用margin屬性，并且在IE8下設(shè)置邊框也無效。

方法三 (XHTML 1.0 strict)：

標(biāo)準(zhǔn)瀏覽器還是將外部容器#box的顯示模式設(shè)置為display:table-cell，IE6/IE7是利用在img標(biāo)簽的前面插入一對(duì)空標(biāo)簽的辦法。

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。以上方法都是收集于腳本之家，暫時(shí)只對(duì)這3個(gè)方法比較滿意，兼容性方面不錯(cuò)，使用起來的限制也比較小，還有些方法我也都一一測(cè)試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

思考：很多方法都是依賴于將外部容器的顯示模式設(shè)置成table才能實(shí)現(xiàn)垂直居中，也就是div來模擬table，如果CSS有一個(gè)屬性來實(shí)現(xiàn)這種效果那該多好。如果你也有好的方法，歡迎你來分享。

原文：http://stylechen.com/img-middle.html

相關(guān)文章

最新評(píng)論