未知大小的图片在已知大小的容器中垂直居中,这是网站设计中经常涉及到的效果,实现的方法很多,这里介绍一种非常简单的方法.
先来看看demo:
提示：你可以先修改部分代码再运行。
一些必要的说明:
1.该方法实现的垂直居中效果必须在严格模式(DTD XHTML 1.0 Strict)下才能生效.
2.对于标准浏览器(FF,Opera,chrome,IE8…)而言.imgbox img{ vertical-align:middle;}就可以实现图片垂直居中.
3.对于IE7,我们可以用line-height:400px;来达到目的.(因为用的行高,所以imgbox里面要有一个字符,空格也可以,01-22更新)
4.剩下的IE6是用*html .imgbox{ font-size:360px; font-family:Arial;}来实现的.其中360=400*90%得来的,400为容器的高度,用90%是因为容易记,其精确值为0.873.至于这个数值怎么来的没有具体研究…
