1、通过添加一无语义图片来解决图片垂直居中CSS,兼容各种IE6,IE7,火狐,谷歌等浏览器。 <style> .itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;} .blank{width:0;height:160px;} .itm img{vertical-align:middle;} </style> <div class="itm"> <img src="http://cn.yimg.com/i/comn/blank.gif" class="blank" /> <a href=""><img src="http://cn.yimg.com/bookmark/yisou/mp3/m060616.jpg"/></a> </div> 2、利用hack来使图片垂直居中 <style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px; height:200px; border: 1px solid #eee; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } </style> <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </div>
兼容各种浏览器的图片垂直居中CSS解决方案,布布扣,bubuko.com
原文地址:http://www.cnblogs.com/meng520/p/3777260.html