css实现图片垂直居中(兼容IE6/IE7)

最新推荐文章于 2018-03-09 17:57:13 发布

原创最新推荐文章于 2018-03-09 17:57:13 发布 · 902 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie6 #css3 #div #html #css

div+css 同时被 3 个专栏收录

89 篇文章

订阅专栏

javascript

40 篇文章

订阅专栏

html5+css3

25 篇文章

订阅专栏

图片垂直居中兼容ie系列

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0;}
/*1.样式 */
.box-1{ display:table;}
.img-wrap-1{ display:table-cell; width:200px; height:200px; border:1px solid #ccc; text-align:center; *font-size:178px; zoom:1; vertical-align:middle;}
/* height与font-size之比大约为：1:0.893; zoom:1是为了触发IE的hasLayout */

/*2.样式 */
.img-wrap-2{ display:inline-block; width:200px; height:200px; line-height:200px; border:1px solid #ccc; text-align:center;}
.img-wrap-2 img{ vertical-align:middle;}

/*3.样式 */
.box-3{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;}
.img-wrap-3 button{ width:100%; height:100%; border:0; background:none;}
.img-wrap-3 img{ cursor:pointer;}

/*4.样式 */
.box-4{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;}
.blank{ width:0px; height:100%; vertical-align:middle;}

</style>
</head>

<body>

<!--图片垂直居中(兼容各主流浏览器，含IE6/IE7)
1.利用table-cell实现居中，font-size做兼容兼容IE6+/FF/Chrome
优点：不添加任何多余标签，兼容主流浏览器-->
<!--html结构-->
<div class="box-1">
	<a class="img-wrap-1" href="#">
		<img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" alt="" />
	</a>
</div>

<!--2.利用line-height实现居中兼容IE7+/FF/Chrome
优点：不需要任何hack，兼容IE7+主流浏览器
缺点：此方法不兼容IE6，当然也可以用方法1中的font-size来兼容IE6-->
<!--html结构-->
<div class="box-2">
	<a class="img-wrap-2" href="#">
		<img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" alt="" />
	</a>
</div>

<!--3.利用button标签实现居中兼容IE6+/FF/Chrome
优点：不需要任何hack，兼容IE6+主流浏览器
缺点：添加了多余的标签button-->
<!--html结构-->
<div class="box-3">
	<a class="img-wrap-3" href="http://baidu.com/" target="_blank">
		<button disabled="disabled"><img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" alt="" /></button>
	</a>
</div>

<!--4.利用1px小图片实现垂直居中兼容IE6+/FF/Chrome
优点：不需要任何hack，兼容IE6+主流浏览器
缺点：添加了多余的标签img-->
<!--html结构-->
<div class="box-4">
	<img class="blank" src="images/blank.gif" alt="" />
	<a class="img-wrap-4" href="#" target="_blank">
		<img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" alt="" />
	</a>
</div>

</body>
</html>

优劣对比：

1.利用table-cell实现居中，font-size做兼容兼容IE6+/FF/Chrome

优点：不添加任何多余标签，兼容主流浏览器

缺点：需要计算处理font-size

2.利用line-height实现居中兼容IE7+/FF/Chrome

优点：不需要任何hack，兼容IE7+主流浏览器

缺点：此方法不兼容IE6，当然也可以用方法1中的font-size来兼容IE6

3.利用button标签实现居中兼容IE6+/FF/Chrome

优点：不需要任何hack，兼容IE6+主流浏览器

缺点：添加了多余的标签button

4.利用1px小图片实现垂直居中兼容IE6+/FF/Chrome

优点：不需要任何hack，兼容IE6+主流浏览器