div中图片居中

最新推荐文章于 2025-07-22 00:16:16 发布

叨叨D

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量1.7k

点赞数

文章标签： div xhtml ie border 浏览器 class

在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>