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