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> 
     
    

      

  • 相关阅读:
    java基础之System类
    java基础之System类
    java基础之Random类
    java基础之Math类
    java基础之Math类
    java基础之Character类概述
    MySQL数据库
    JavaScript面向对象与原型
    PHP
    sass基础用法
  • 原文地址:https://www.cnblogs.com/meng520/p/3777260.html
Copyright © 2011-2022 走看看