在IE8 和FF下控制图片垂直居中的方法很简单，就是给图片的外围定义line-height的高度为外围的height高度即可。并且图片设置vertical-align:middle;
但是IE6下却不能垂直显示,越来越感觉IE6是一坨狗屎。为了能够解决IE6的正常显示。用下面的代码可以兼容这几个浏览器的现实效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div+CSS图片垂直居中的方法-兼容IE6.0/IE7.0和FF</title>
<style type="text/css">
.imgBox {
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 175px; /*此处的font-size为height除以1.14 */
width:200px;
height:200px;
border: 1px solid #eee;
}
.imgBox img {
vertical-align:middle; border:0;
}
</style>
</head>
<body>
<div class="imgBox">
<img alt="" src="图片地址" />
</div>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
