css 图片垂直居中(兼容各主流浏览器,含IE6/IE7)

2016-03-02    编辑:future     点击(
对于垂直居中这个问题有很多人不懂也做不好更做不好兼容问题了,下面我就来整理了一些css 图片垂直居中(兼容各主流浏览器,含IE6/IE7)例子,给各位看看。

1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome
优点:不添加任何多余标签,兼容主流浏览器

'css

 代码如下 复制代码
<!--html结构-->
<div class="box-1">
 <a class="img-wrap-1" href="#">
  <img src="images/1.png" alt="" />
 </a>
</div>
/* 样式 */
.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.利用line-height实现居中兼容IE7+/FF/Chrome
优点:不需要任何hack,兼容IE7+主流浏览器
缺点:此方法不兼容IE6,当然也可以用方法1中的font-size来兼容IE6

'css

 代码如下 复制代码
<!--html结构-->
<div class="box-2">
 <a class="img-wrap-2" href="#">
  <img src="images/1.png" alt="" />
 </a>
</div>
/* 样式 */
.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.利用button标签实现居中兼容IE6+/FF/Chrome
优点:不需要任何hack,兼容IE6+主流浏览器
缺点:添加了多余的标签button

'css
 

 代码如下 复制代码
<!--html结构-->
<div class="box-3">
 <a class="img-wrap-3" href="http://www.111cn.net/" target="_blank">
  <button disabled="disabled"><img src="images/1.png" alt="" /></button>
 </a>
</div>
/* 样式 */
.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.利用1px小图片实现垂直居中兼容IE6+/FF/Chrome
优点:不需要任何hack,兼容IE6+主流浏览器
缺点:添加了多余的标签img

'css
 

 代码如下 复制代码
<!--html结构-->
<div class="box-4">
 <img class="blank" src="images/blank.gif" alt="" />
 <a class="img-wrap-4" href="#" target="_blank">
  <img src="images/1.png" alt="" />
 </a>
</div>
/* 样式 */
.box-4{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;}
.blank{ width:0px; height:100%; vertical-align:middle;}

当然,垂直居中的方法不止以上几种,但目前较常用的也就这几个,而且兼容性比较好,后面若发现更好的方法再进行补充