实现未知高图片垂直居中的办法

admin

法则一：在图片的上层DIV加入CSS代码：display:table-cell;  vertical-align:middle; 不支持IE
法则二：在图片上层容器加入CSS代码：*display:block;   *font-size:349px; *font-family:Arial;
　　　　在img加入代码：*vertical-align:middle;
　　　　解释：字体为Arial以兼容utf-8引起的hack失效问题，大小约为容器高度的0.873倍 400*0.873 = 349

两者合一，可实现多浏览器的兼容，具体http://www.housey.cn/?mid=62案例演示：
#ArticleView ul li .thumbs a{ display:table-cell; width:212px; height:160px; vertical-align:middle; *font-size:142px; *display:block; *font-family:Arial;}
#ArticleView ul li .thumbs a img{ max-width:212px; max-height:160px; *vertical-align:middle;}
其中font-size做了精细调整，以准确居中。

admin

此例在弘帝建站系统中的应用。
#Navigator .RowsTitle .More a{ display:table-cell; width:60px; height:38px; vertical-align:middle; *font-size:38px; *display:block; *font-family:Arial;}
#Navigator .RowsTitle .More a img{ max-width:60px; max-height:38px; *vertical-align:middle;}
直接复制，可以修改width,height以适应更多的风格

admin

已知盒子高度里的图片居中，用table-cell实现，适合IE8,Chorme以上版本。
.Thumbs{ display:table-cell; vertical-align:middle; height:96px;}