多图片的垂直居中排版，比如相册中相片的缩略图展示页，如图所示：
先看效果：
代码如下：
============================
-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
无标题文档
.box{ width:232px; height:200px; background:#333333;
/*非IE的主流浏览器识别的垂直居中的方法*/
?display:table-cell;
?vertical-align:middle;
?/*设置水平居中*/
?text-align:center;
?/* 针对IE的Hack */
?? *display: block;
?*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
?*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
}
.box img{ padding:4px; border:1px #cdcdcd solid; vertical-align:middle;}
–>
=========================================================
但是我现在要多张图片的垂直居中排版，比如相册，看代码：
-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
无标题文档
.all{ width:696px; height:200px; clear:left}
.box{ width:232px; height:200px; background:#333333;
/*非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*/
?*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
}
.box img{ padding:4px; border:1px #cdcdcd solid; vertical-align:middle;}
–>
?
???
???
???
?
==============================================================
IE下显示是想要的效果：
?
?但是在ff，opera，safari下则没有垂直居中对齐；如图：
问题就在float:left;那么解决的方案就是吧float:left;CSS hack成*float:left;这样问题就解决了；
完整代码如下：
==============================================================================
-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
无标题文档
.all{ width:696px; height:200px; clear:left}
.box{ width:232px; height:200px; background:#333333;
/*非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*/
?*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
}
.box img{ padding:4px; border:1px #cdcdcd solid; vertical-align:middle;}
–>
?
???
???
???
?
