zoukankan      html  css  js  c++  java
  • 兼容各种浏览器的图片垂直居中CSS解决方案

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

    1. <style> 
    2. .itm{border:2px solid #ccc;160px;height:160px;text-align:center;}  
    3. .blank{0;height:160px;}  
    4. .itm img{vertical-align:middle;}  
    5. </style> 
    6. <div class="itm"> 
    7. <img src="http://cn.yimg.com/i/comn/blank.gif" class="blank" /> 
    8. <a href=""><img src="http://cn.yimg.com/bookmark/yisou/mp3/m060616.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.         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://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
    26. </div> 

    上海交友网

  • 相关阅读:
    iOS6和iOS7代码的适配(5)——popOver
    es5创建对象与继承
    js学习日记-new Object和Object.create到底干了啥
    js滚动及可视区域的相关的操作
    css匹配规则及性能
    normalize.css源码分析
    css的水平居中和垂直居中总结
    js快速排序算法
    数据结构flash演示
    二叉树遍历
  • 原文地址:https://www.cnblogs.com/shjy5/p/3305604.html
Copyright © 2011-2022 走看看