網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

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

日期:2013-12-07  來源:攀枝花惠康網絡公司


<div class=”all”>
<head>

曾經轉載過淘寶懌飛的一篇文章《圖片垂直居中的使用技巧》(http://www.css88.com/article.asp?id=400或者參看作者原文http://www.planabc.net/2008/05/26/img_vertical_center_solution/)。今天無事試了下,不美觀真OK!

先看效不美觀:

<div class=”box”><img src=http://www.css88.com/archives/”an1.gif” width=”121″ height=”23″ /></div>

代碼如下:

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

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

<body>
<div class=”all”>

IE下顯示是想要的效不美觀:


<div class=”box”><img src=http://www.css88.com/archives/”an1.gif” width=”121″ height=”23″ /></div>
<div class=”box”><img src=http://www.css88.com/archives/”20060816151828_656259.jpg” width=”60″ height=”60″ /></div>
<div class=”box”><img src=http://www.css88.com/archives/”index_rebuild_done121111111.png” width=”212″ height=”124″ /></div>
<div class=”box”><img src=http://www.css88.com/archives/”index_rebuild_done121111111.png” width=”212″ height=”124″ /></div>
</div>
<html xmlns=”http://www.w3.org/1999/xhtml“>
</body>
</html>


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


<div class=”box”><img src=http://www.css88.com/archives/”an1.gif” width=”121″ height=”23″ /></div>
<div class=”box”><img src=http://www.css88.com/archives/”20060816151828_656259.jpg” width=”60″ height=”60″ /></div>
</div>
</body>
</html>

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

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

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图