css多张图片一行显示居中,【CSS技巧】多图片的垂直居中排版

多图片的垂直居中排版，比如相册中相片的缩略图展示页，如图所示：

先看效果：

代码如下：

============================

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/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” “http://www.w3.org/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” “http://www.w3.org/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;}

–>

?

???

???

???

?