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

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

曾经转载过淘宝怿飞的一篇文章《图片垂直居中的使用技巧》(https://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“>
<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”>
<!–
.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;}
–>
</style>
</head>

<body>

<div class=”box”><img src=”an1.gif” width=”121″ height=”23″ /></div>
</body>
</html>

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

但是我现在要多张图片的垂直居中排版,比如相册,看代码:

<!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”>
<!–
.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;}
–>
</style>
</head>

<body>
? <div class=”all”>
??? <div class=”box”><img src=”an1.gif” width=”121″ height=”23″ /></div>
??? <div class=”box”><img src=”20060816151828_656259.jpg” width=”60″ height=”60″ /></div>
??? <div class=”box”><img src=”index_rebuild_done121111111.png” width=”212″ height=”124″ /></div>
? </div>
</body>
</html>

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

IE下显示是想要的效果:

?

?但是在ff,opera,safari下则没有垂直居中对齐;如图:

问题就在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”>
<!–
.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;}
–>
</style>
</head>

<body>
? <div class=”all”>
??? <div class=”box”><img src=”an1.gif” width=”121″ height=”23″ /></div>
??? <div class=”box”><img src=”20060816151828_656259.jpg” width=”60″ height=”60″ /></div>
??? <div class=”box”><img src=”index_rebuild_done121111111.png” width=”212″ height=”124″ /></div>
? </div>
</body>
</html>

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【CSS技巧】多图片的垂直居中排版

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏