在網(wǎng)頁(yè)排版中，給網(wǎng)頁(yè)圖片設(shè)置垂直居中可不是一件很簡(jiǎn)單的事情。這里所說(shuō)的圖片，其寬度和高度都是不固定的，意思就是：無(wú)論圖片的大小，一樣要在網(wǎng)頁(yè)中垂直居中，該怎么做呢？在一個(gè)單獨(dú)的網(wǎng)頁(yè)里面存在一張大小未知的圖片，其設(shè)置不是那么簡(jiǎn)單的。
且看下圖的效果：我們實(shí)現(xiàn)的就是這樣的功能。
設(shè)置圖片垂直居中的方法(在XHTML 1.0 transitional的條件下)：
該方法是將外部容器的顯示模式設(shè)置成display:table，img標(biāo)簽外部再嵌套一個(gè)span標(biāo)簽，并設(shè)置span的顯示模式為display:table-cell（讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)，類(lèi)似于td標(biāo)簽。），這樣就可以很方便的使用vertical-align象表格元素那樣對(duì)齊了，當(dāng)然這只是在標(biāo)準(zhǔn)瀏覽器下，IE6/IE7還得使用定位。
HTML代碼如下：
<div>
<span><img src="http://m.mallbillboards.com/images/demo.jpg"></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]-->
