服务器安全  (41)
网站推广专题  (36)
智能建站知识  (12)
DIV+CSS  (44)
网站建设知识  (31)
乱七八糟  (1)
 

纯粹css+div实现图片上下(垂直)居中

北京智能建站-智能建站系统-十艾智能建站   2009-01-09 16:42:36 作者:智能建站 来源: 文字大小:[][][]

<!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=gb2312" />
<title>Untitled Document</title>
</head>

<body>
<style type="text/css">
.box {
/*非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编码*/

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
</style>
<div class="box">
<img src="http://www.10i.com.cn/advs/1192545384.jpg" />
</div>
</body>
</html>

最新评论
发表评论  
2010-04-25 02:36
  我来评论一下!!!  
评论标题
评论内容
图片上传
表情图标
验 证 码
关于我们 站点地图 联系方式 帮助中心 会员社区 友情链接 内容搜索
 
本站关键词:智能建站 北京智能建站  智能建站系统   智能网店 免费智能建站
24小时服务热线:13521942498    E-mail:whwvip#126.com(请将#改为@)  QQ:279764954  621825069  447458068
智能建站  智能网店  seo优化© 版权所有  京ICP备07014896号