本页二维码,扫一扫分享到朋友圈
朋友圈

兼容各种浏览器的图片垂直居中CSS


阅读215 评论0 赞 59返回首页    go 编程与技术  go css



1、通过添加一无语义图片来解决图片垂直居中CSS,兼容各种IE6,IE7,火狐,谷歌等浏览器。

  1. <style> 

  2. .itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;}  

  3. .blank{width:0;height:160px;}  

  4. .itm img{vertical-align:middle;}  

  5. </style> 

  6. <div class="itm"> 

  7. <img src="http://images.12v.cn/b97827cc/201608/70bbf240788e7d68c006b62a40391e56.jpg" class="blank" /> 

  8. <a href=""><img src="http://images.12v.cn/b97827cc/201608/70bbf240788e7d68c006b62a40391e56.jpg"/></a> 

  9. </div> 


2、利用hack来使图片垂直居中


  1. <style> 

  2. .box {  

  3.         /*非IE的主流浏览器识别的垂直居中的方法*/  

  4.         display: table-cell;  

  5.         vertical-align:middle;  

  6.  

  7.         /*设置水平居中*/  

  8.         text-align:center;  

  9.  

  10.         /* 针对IE的Hack */  

  11.         *display: block;  

  12.         *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/  

  13.         *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/  

  14.  

  15.         width:200px;  

  16.         height:200px;  

  17.         border: 1px solid #eee;  

  18. }  

  19. .box img {  

  20.         /*设置图片垂直居中*/  

  21.         vertical-align:middle;  

  22. }  

  23. </style> 

  24. <div class="box"> 

  25.         <img src="http://images.12v.cn/b97827cc/201608/70bbf240788e7d68c006b62a40391e56.jpg" /> 

  26. </div> 




  上一篇:go CSS文件和样式命名规范
  下一篇:go CSS垂直居中和水平居中方法


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:08-24