【CSS技巧】多图片的垂直居中排版

日期：2013-12-07 来源：攀枝花惠康网络公司

曾经转载过淘宝怿飞的一篇文章《图片垂直居中的使用技巧》（http://www.css88.com/article.asp?id=400或者参看作者原文http://www.planabc.net/2008/05/26/img_vertical_center_solution/）。今天无事试了下，不美观真OK！

先看效不美观：

代码如下：

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<title>无问题文档</title>
.box img{ padding:4px; border:1px #cdcdcd solid; vertical-align:middle;}
<style type=”text/css”>
<!–
.box{ width:232px; height:200px; background:#333333;
/*非IE的主流浏览器识此外垂直居中的体例*/
display:table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */

可是在ff，opera，safari下则没有垂直居中对齐；如图：

*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
}
–>
</style>
</head>

text-align:center;

<body>

</html>

可是我此快要多张图片的垂直居中排版，好比相册，看代码：

<html xmlns=”http://www.w3.org/1999/xhtml“>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无问题文档</title>
<style type=”text/css”>
<!–

.all{ width:696px; height:200px; clear:left}
.box{ width:232px; height:200px; background:#333333;
/*非IE的主流浏览器识此外垂直居中的体例*/
display:table-cell;

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

vertical-align:middle;
/*设置水平居中*/
/* 针对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;}
–>

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

</style>
</head>

IE下显示是想要的效不美观：

</body>

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

问题就在float:left;那么解决的方檀卷是吧float:left;CSS hack成*float:left;这样问题就解决了；

完整代码如下：

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无问题文档</title>
<style type=”text/css”>
<!–

<body>
.all{ width:696px; height:200px; clear:left}
.box img{ padding:4px; border:1px #cdcdcd solid; vertical-align:middle;}
.box{ width:232px; height:200px; background:#333333;
/*非IE的主流浏览器识此外垂直居中的体例*/
display:table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*float:left;
*d*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失踪效问题，如gbk编码*/
*font-family:Arial;/*防止非utf-8引起的hack失踪效问题，如gbk编码*/
}
–>
</style>
</head>

文章来源：攀枝花惠康网络公司

惠康网络，是一家专业从事攀枝花网站建设，攀枝花网站制作，攀枝花网站设计公司，提供网站建设一条龙服务（网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广），惠康网络立足攀枝花，辐射全中国，攀枝花惠康网络的客户已经遍布国内各地大中小城市，我们高效优质的网站建设服务深受用户好评。