CSS_居中_图片垂直居中

摘自 怿飞的空间

 

http://www.planabc.net/2008/05/26/img_vertical_center_solution/

 

奇怪的是在针对IE的HACK中，font-size我试验的无效，不知道这个黄金比例是否有依据？

自己改成了line-height反而有效果。。。

 

CSS：

.all { width:696px; height:200px; clear:left;} .box { width:232px; height:200px; background:#333; /*非IE的主流浏览器识别的垂直居中的方法*/ display:table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *float:left; *display:block; /*font-size: 175px; 约为高度的0.873，200*0.873 约为175*/ *line-height:200px; *font-family:Arial;}  

 

HTML：

<div class=”all”> <div class=”box”><img src="”an1.gif”" mce_src="”an1.gif”" width=”121″ height=”23″ /></div> <div class=”box”><img src="”20060816151828_656259.jpg”" mce_src="”20060816151828_656259.jpg”" width=”60″ height=”60″ /></div> <div class=”box”><img src="”index_rebuild_done121111111.png”" mce_src="”index_rebuild_done121111111.png”" width=”212″ height=”124″ /></div> </div>