首页 > 代码库 > 兼容各种浏览器的图片垂直居中CSS解决方案
兼容各种浏览器的图片垂直居中CSS解决方案
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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。