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

標籤：c   style   class   blog   a   http   

1、通過添加一無語義圖片來解決圖片垂直置中CSS，相容各種IE6,IE7,Firefox，Google等瀏覽器。<style> .itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;}  .blank{width: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編碼*/           width: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>