首页 > xhtml&css > 【转】图片垂直居中的使用技巧

【转】图片垂直居中的使用技巧

2008年5月27日 发表评论 阅读评论

  以前也经常遇到未知高度的图片或者文字垂直居中的问题,搞一堆代码,最后才使的图片垂直居中了,太麻烦,甚至现在我的博客上面的rss的图标,还没有垂直居中。

  今天怿飞的博客上发表了一篇关于图片垂直居中的日志,代码很简单,对我说帮助不小,转载记录下,方便以后自己的使用。

  在曾经的 淘宝UED 招聘 中有这样一道题目:

  “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

  当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。

  题目的难点在于两点:

  1. 垂直居中;
  2. 图片是个置换元素,有些特殊的特性。

  至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:

CSS代码
  1. .box {   
  2.     /*非IE的主流浏览器识别的垂直居中的方法*/  
  3.     displaytable-cell;   
  4.     vertical-align:middle;   
  5.   
  6.     /*设置水平居中*/  
  7.     text-align:center;   
  8.   
  9.     /* 针对IE的Hack */  
  10.     *displayblock;   
  11.     *font-size175px;/*约为高度的0.873,200*0.873 约为175*/  
  12.     *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/  
  13.   
  14.     width:200px;   
  15.     height:200px;   
  16.     border1px solid #eee;   
  17. }   
  18. .box img {   
  19.     /*设置图片垂直居中*/  
  20.     vertical-align:middle;   
  21. }  
XML/HTML代码
  1. <div class=“box”>  
  2.     <img src=“http://pics.taobao.com/bao/album/promotion/taoscars_180×95_071112_sr.jpg” />  
  3. </div>  

  当然还有其他的解决方法,在此不深究,有兴趣的可以阅读下:

分类: xhtml&css 标签: , ,
  1. 1970年1月1日08:00 | #1

    你放一个例子图片撒,我看看啥子效果.

  2. 逍遥老鬼
    1970年1月1日08:00 | #2

    不用放什么例子吧,直接套用就可以了。

  3. 1970年1月1日08:00 | #3

    我对这个问题的一些个人想法。

    http://www.zhangjingwei.com/show-154-1.html

  1. 本文目前尚无任何 trackbacks 和 pingbacks.