合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

【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;那么解决的方檀卷?#21069;?/span>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>

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

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

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
邮编:617200

合买大神 水果大战游戏机说明 都灵vs弗洛西诺比分预测 leste莱斯特钨钢lm0208 西班牙瓦伦西亚宾馆 莱斯特·哈德森cba 巴萨皇家社会 水晶宫里奏霓裳 卡利亚里vs那不勒斯 幸运飞艇开奖结果查询 雷恩加尔视频