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> 

    上海交友网

  • 相关阅读:
    javascript 多条件分支结构
    初步认识android四大组件之Broadcast
    Apache Tomcat6之阀学习整理
    用java实现一道c笔试题
    Apache Tomcat6 之连接器学习整理(1)
    iphone常用代码块 HA
    iphone开发UIWebView 的使用 HA
    quickmaps HA
    iphone开发uiscrollview 的使用 HA
    iphone api 使用说明详细 HA
  • 原文地址:https://www.cnblogs.com/shjy5/p/3305604.html
Copyright © 2011-2022 走看看