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

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

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

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

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

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

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

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

　　题目的难点在于两点：

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

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

CSS代码
  1. .box {   
  2.     /*非IE的主流浏览器识别的垂直居中的方法*/  
  3.     display: table-cell;   
  4.     vertical-align:middle;   
  5.   
  6.     /*设置水平居中*/  
  7.     text-align:center;   
  8.   
  9.     /* 针对IE的Hack */  
  10.     *display: block;   
  11.     *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/  
  12.     *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/  
  13.   
  14.     width:200px;   
  15.     height:200px;   
  16.     border: 1px 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. iced
    1970年1月1日08:00 | #3
    回复 | 引用

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

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

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