浏览：1472008-05-03 13:45   来自Lowdens      :

昨夜与群友讨论图片垂直居中时,突然想到与这很相像的DIV垂直居中效果.raozou分享了他的效果代码,今将其整理,特贴下来大家一起分享:


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

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


<!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>DIV垂直居中</title>
<style type="text/css">
#menu
{
       position: absolute;
       top: 50%;
       left: 50%;
       margin-top: -25px;
       margin-left: -150px;
       color:blue;
       width: 300px;
       height: 50px;
       border:solid 1px gray;
}
</style>
</head>

<body>
<div id=menu>页面水平垂直居中</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=gb2312" />
<title>DIV垂直居中</title>
<style type="text/css">
#menu
{
       position: absolute;
       top: 50%;
       left: 50%;
       margin-top: -25px;
       margin-left: -150px;
       color:blue;
       width: 300px;
       height: 50px;
       font-weight:bold;
       border:solid 1px gray;
       line-height:50px;
       font-size:20px;
       text-align:center;
}
</style>
</head>

<body>
<div id=menu>页面水平垂直居中</div>
</body>
</html>

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

楼主
  1周前   刚刚      :
3q
回复  1楼 回到顶楼 
  51分钟前   datasky      :
--------------------------------------
position: absolute;
top: 50%;
left: 50%;

margin-top: -25px;
margin-left: -150px;
width: 300px;
height: 50px;
--------------------------------------
爽。
回复  2楼 回到顶楼 

你还不是小组成员，加入小组以后才能发布新主题！
> 返回“web标准设计”


其他话题

1 33296