博客园-生物钟倒转http://www.cnblogs.com/Lowdens/zh-cnMon, 06 Oct 2008 14:14:46 GMTMon, 06 Oct 2008 14:14:46 GMT60一行、多行文本垂直居中的CSS实例说明http://www.cnblogs.com/Lowdens/archive/2008/07/09/1239075.htmlLowdensLowdensWed, 09 Jul 2008 08:46:00 GMThttp://www.cnblogs.com/Lowdens/archive/2008/07/09/1239075.htmlhttp://www.cnblogs.com/Lowdens/comments/1239075.htmlhttp://www.cnblogs.com/Lowdens/archive/2008/07/09/1239075.html#Feedback1http://www.cnblogs.com/Lowdens/comments/commentRss/1239075.htmlhttp://www.cnblogs.com/Lowdens/services/trackbacks/1239075.html阅读全文

[新闻]51.COM技术副总裁邵辉跳槽百度
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>图片垂直居中之姊妹--DIV垂直居中http://www.cnblogs.com/Lowdens/archive/2008/05/03/1180251.htmlLowdensLowdensSat, 03 May 2008 05:50:00 GMThttp://www.cnblogs.com/Lowdens/archive/2008/05/03/1180251.htmlhttp://www.cnblogs.com/Lowdens/comments/1180251.htmlhttp://www.cnblogs.com/Lowdens/archive/2008/05/03/1180251.html#Feedback0http://www.cnblogs.com/Lowdens/comments/commentRss/1180251.htmlhttp://www.cnblogs.com/Lowdens/services/trackbacks/1180251.html    昨夜与群友讨论图片垂直居中时,突然想到与这很相像的DIV垂直居中效果.raozou分享了他的效果代码,今将其整理,特贴下来大家一起分享:

 1<style type="text/css">
 2<!--
 3#middle
 4{
 5       background:blue;
 6       position:absolute;
 7       left:expression((body.clientWidth-50)/2 + "px");
 8       top:expression((body.clientHeight-50)/2 + "px");
 9       width:50px;
10       height:50px;
11}
12-->
13</style>
14<div id="middle"  align="absmiddle"></div> <!--absmiddle 图像的中间与同一行中最大元素的中间对齐。
15-->

说明:这段代码没有文档类型和命名空间的申明,我已试过,如果加上,蓝色方快儿将位于顶部且一部分被浏览器隐藏,大家可以试试!此外,FF不支持expression. 

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5<title>DIV垂直居中</title>
 6<style type="text/css">
 7#menu
 8{
 9       position: absolute;
10       top: 50%;
11       left: 50%;
12       margin-top: -25px;
13       margin-left: -150px;
14       color:blue;
15       width: 300px;
16       height: 50px;
17       border:solid 1px gray;
18}
19</style>
20</head>
21
22<body>
23<div id=menu>页面水平垂直居中</div>
24</body>
25</html>

 

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5<title>DIV垂直居中</title>
 6<style type="text/css">
 7#menu
 8{
 9       position: absolute;
10       top: 50%;
11       left: 50%;
12       margin-top: -25px;
13       margin-left: -150px;
14       color:blue;
15       width: 300px;
16       height: 50px;
17       font-weight:bold;
18       border:solid 1px gray;
19       line-height:50px;
20       font-size:20px; 
21       text-align:center;
22}
23</style>
24</head>
25
26<body>
27<div id=menu>页面水平垂直居中</div>
28</body>
29</html>

    最后感谢raozou分享效果代码!



[新闻]Mono 2.0终于到来
博客园首页 社区 新闻频道 小组 博问 网摘 闪存]]>