|
圖片的寬度和高度是未知的，沒有一個固定的尺寸，在這個前提下要使圖片在一個固定了寬度和高度的容器中垂直居中，想想感覺還是挺麻煩的，由于最近的項(xiàng)目可能會用到這個方案，所以把一些常用的方法都收集整理了一下。
下圖是理想中的效果圖，外部容器的寬度和高度是固定的，中間的圖片寬度和高度未知，但是圖片要始終要相對于外部的容器垂直居中。
但是實(shí)際中實(shí)現(xiàn)的效果并不是很完美，由于各瀏覽器的解析都各不相同，所以各瀏覽器都會有1px-3px的偏差。
方法一 (XHTML 1.0 transitional)：
該方法是將外部容器的顯示模式設(shè)置成display:table，img標(biāo)簽外部再嵌套一個span標(biāo)簽，并設(shè)置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當(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]-->
出處：
責(zé)任編輯：bluehearts
上一頁 下一頁 未知高度的圖片垂直居中 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 未知高度的圖片垂直居中 [1]
第 2 頁 
