图片垂直居中的效果

七彩课堂[网页设计教程]

图片垂直居中的效果

图片垂直居中的效果
第一种方法：通过一个空白图片可以达到垂直居中的效果。
代码如下复制代码
<html>
<title>图片居中</title>
<style>
/*定义垂直居中*/
#test * {
margin: 0px;
padding: 0px;
vertical-align: middle;
}
/*定义div大小，以及水平居中*/
#test {
background: #fff000;
width: 500px;
height: 500px;
text-align: center;
}
/*辅助图片高度填满div，宽度为0，所以看不到这个图片*/
#img {
width: 0px;
height: 100%;
}
</style>
<body>
<div id="test">
　　 
<img alt="" src="" id="img">
　　
<img alt="" src="skin/images/top/logo.jpg">
</div>
</body>
</html>
个人觉得vertical-align: middle 是相对于左边的高度垂直居中的，我给左边一个填满div的图片，就可以实现垂直居中了。
第二种方法：往div里面加表格。
代码如下复制代码
<html>
<style>
#a {
background: #fff000;
width: 500px;
height: 500px;
overflow: hidden;
text-align: center;
}
</style>
<body>
<div id="a">
<table width="100%" height="100%">
<tr>
<td align="center">
<img src="skin/images/top/logo.jpg" />
</td>
</tr>
</table>
</div>
</body>
</html>
在表格里就很容易设置居中了。
经测试，这两种做法都没有浏览器不兼容的问题。推荐用第一种方法。
另外，说一下overflow: hidden; 这个属性，当图片大小超出div的大小时，会影藏超出的部分。不设置的话，图片会全部显示，覆盖在div上。