知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    兼容各種瀏覽器的圖片垂直居中CSS解決方案

    作者:佳明媽 來源:懶人建站 2009-10-13 人氣:
    CSS技巧:通過添加一無語義圖片來解決圖片垂直居中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://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.         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://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
    26. </div> 

     

    ↓ 查看全文

    兼容各種瀏覽器的圖片垂直居中CSS解決方案由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    兼容各種瀏覽器的圖片垂直居中CSS解決方案-最新評論

    老子是皇帝在线客服 葫芦岛麻将52官方网站 手机大嘴棋牌官方下载 3d的开奖号 国产sm捆绑 宁夏11选5开奖 星悦内蒙麻将 山西快乐十分当天走势 山东十一选五开奖结 四川体彩金7乐走势图 甘肃快3综合走势图 秒速赛车pk10计 股票行情软件下载排行 山东快乐扑克3开奖结果走势图 pk10信誉群 武汉麻将必胜绝技 10分赛车彩票app