图片垂直居中的使用技巧

在曾经的 淘宝UED 招聘中有这样一道题目:
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

题目的难点在于两个方面:

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

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

  1. <pre>.box {
  2.     非IE的主流浏览器识别的垂直居中的方法
  3.     display: table-cell;
  4.     vertical-align:middle;
  5.     设置水平居中
  6.     text-align:center;
  7.     针对IEHack
  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.  
  16. .box img {
  17.     设置图片垂直居中
  18.     vertical-align:middle;
  19. }
  20. <div class="box">
  21. <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt="" />
  22. </div>

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

崔凯博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯 All rights reserved. 蜀ICP备12025891号.