图片垂直居中『2』
关于图片垂直居中的问题，之前的一篇文章做了一些简单的介绍，但是之前的解决办法，在受到某一些元素的影响后，ff中显示会有差异，这个就是浮动带来的困扰。针对这种情况，跟一位同事进行了矫正，通过另外一种方法实现图片垂直居中，以下是这种方法相关的html结构：
<div class=”img_wrap”>
<img src=”images/RED_0099.JPG” alt=”rainaxin” />
</div>
对应的css代码如下：
- .img_wrap{float:left;
- vertical-align:middle;
- text-align:center;
- width:300px;
- line-height:300px;
- height:300px;
- border:1px solid #ccc;
- *font-size:260px;}
- .img_wrap:after{content: "."; font-size:0; }
- .img_wrap img{vertical-align:middle;}
显示效果如下：
这种方法实现的原理，就是将图片模拟成文字形式，通过行高控制图片的垂直居中，使用了伪类的写法，解决ff下面不能垂直居中的问题，大家可以参考下。也许不是最完美的办法，但是也会给大家平时的工作带来一些帮助！
这种方法的原理是将用一个很大的font-size产生的 em square(also called em box) 把里面的行高撑开，这个行高和图片的容器的高度是一样的。和在对文字垂直居中时用line-height产生一个我们想要的行高原理是一样的。
这个方法的关键是对于指定的font-size大小所产生的em square的高度必须和图片的容器的高度是一样的，否则就无法实现真正的垂直居中。但是em square 的高度和产生他的font-size大小之间的关系是根据字体的不同而不同的。
对于”Times New Roman”(很多浏览器的默认字体)： font-size(px) = height of em square(px) * 0.905,国内的一些人给出的解决方案中这个值都是0.873，我不知道是对应哪个字体的，所以我们最好给这个图片的容器指定一个字体，以实现完美的垂直居中。
附一篇文章，里面有例子：http://7655cjc.blogspot.com/2009/03/css-vertical-centering.html
写的挺详细的，谢谢分享！
这个纠正了之前第一篇关于垂直居中的认识，其实那个约值是跟字体有关的。
本篇是在前一篇的基础上解决ff下面浮动元素干扰图片垂直居中的问题。^_^@7655cjc
恩,不错的文章,收藏~
但是,这个方法不精确,图片和容器小了可以看到明显的偏移.
不是不精确，而是这个约值的设定是跟容器中设置的字体相关的，并不是绝对的。比如当字体为“Times New Roman”时，这个约值就为0.905，可以根据具体情况进行计算。@Vilic
Hi Man!, need your help.
Underage drinking effecing license?
Thenks. I am vaiting for answer!!!