五月 11

五月 11th, 2009图片垂直居中的使用技巧（转自怿飞’s Blog）

Html/Css/PsKelvin15:55

<div class="box"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180×95_071112_sr.jpg" /></div>

  1. .box {
  2. /*非IE的主流浏览器识别的垂直居中的方法*/
  3. display: table-cell;
  4. vertical-align:middle;
  5. /*设置水平居中*/
  6. text-align:center;
  7. /* 针对IE的Hack */
  8. *display: block;
  9. *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
  10. *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
  11. width:200px;
  12. height:200px;
  13. border: 1px solid #eee;
  14. }
  15. .box img {
  16. /*设置图片垂直居中*/
  17. vertical-align:middle;
  18. }

Rss 2.0TrackBack

本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议，转载请注明作者及出处。

Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

相关日志

随机日志

« 详解CSS的优先权（转自怿飞’s Blog） Remember When »

要说点啥就在这吧