多图片的垂直居中排版,比如相册中相片的缩略图展示页,如图所示:
曾经转载过淘宝怿飞的一篇文章《图片垂直居中的使用技巧》(https://www.7psus5.com/article.asp?id=400或者参看作者原文)。今天无事试了下,果然OK!
先看效果:
代码如下:
============================
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ““>
<html xmlns=”“>
<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” ““>
<html xmlns=”“>
<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” ““>
<html xmlns=”“>
<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>
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂