利用table-cell实现居中，font-size做兼容兼容IE6+/FF/Chrome，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片垂直居中(兼容各主流浏览器，含IE6/IE7)</title>
<style media="screen">
/* 样式 */
.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 */
</style>
</head>
<body>
<p>利用table-cell实现居中，font-size做兼容兼容IE6+/FF/Chrome</p>
<div class="box-1">
<a class="img-wrap-1" href="#">
<img src="images/1.png" alt="" />
</a>
</div>
</body>
</html>
评论前必须登录！
注册