图片垂直居中

方法一：

 

Code

 

 

方法二：

 

Code

 

方法三：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
<!-- 
* {margin:0;padding:0}
div {
    width:500px;
    height:500px;
    line-height:500px;
    border:1px solid #ccc;
    overflow:hidden;
    position:relative;
    text-align:center;
    }
div p {
    position:static;
    +position:absolute;
    top:50%;
    vertical-align:middle
    }
img {
    position:static;
    +position:relative;
    top:-50%;left:-50%;
    width:276px;
    height:110px;
    vertical-align:middle
    }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

 

方法四：

 

Code

 

方法五：

 

Code

 

方法六：

 

Code

 

 

由于各浏览器的差异，图片垂直居中 能尽量用表格完成

<td height="48" width="48" valign="middle" align="center">

posted @ 2009-10-20 14:19  朝夕  阅读(233)  评论(0)  编辑  收藏  举报