【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>

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。