多图片的垂直居中排版,比如相册中相片的缩略图展示页,如图所示:
先看效果:
代码如下:
============================
-//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;}
–>
?
???
???
???
?