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

    1、通过添加一无语义图片来解决图片垂直居中CSS,兼容各种IE6,IE7,火狐,谷歌等浏览器。
    
    <style> 
    .itm{border:2px solid #ccc;160px;height:160px;text-align:center;}  
    .blank{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编码*/  
     
            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> 
     
    

      

  • 相关阅读:
    word2vec
    视频推荐系统
    python基础
    go-elasticsearch
    Docker 部署 go项目
    gohbase
    禅道部署linux
    jmeter 报错 Error occurred during initialization of VM Could not reserve enough space for object heap
    jarvis OJ-DSA
    算法-我的第一本算法书(一)
  • 原文地址:https://www.cnblogs.com/meng520/p/3777260.html
Copyright © 2011-2022 走看看