您现在的位置: 首页>>招商资讯>>工具>>网站建设>>正文-CSS中绝对居中问题
CSS中绝对居中问题
日期:2006-1-17 15:17:35     来源:转载   编辑:王宏涛  

    什么叫绝对居中?就是说容器到屏幕左右上下四个方向都有间距,并且随屏幕大小缩放相对不变或者等比例调整,始终居屏幕中间。 绝对居中也有两种情况,容器的绝对大小和相对大小。 同时有很多方法可以实现,总结起来大致如下:

    1. 利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小。(非标准)

    以下是引用片段:
<table width="100%" height="100%" border="0"align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:center;">
<table width="200" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#ef1122">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>

    2. 利用负边距方法,绝对定位使容器相对屏幕绝对居中,此时的被嵌套容器只能为绝对大小。(标准)

    根据margin负值和top left的比例控制,实现随屏幕绝对居中,容器大小改变需要重新调整margin top left的参数:

    以下是引用片段:
<div style="background:#f00; width:740px; height:340px; left:50%; margin:-170px 0 0 -370px; position:absolute; top:50%;">
</div>
 
    3. 老外给出的另类方法,巧妙利用display:inline-block;,IE6.0测试通过。(标准)
    注意1.height:100%是关键:2.edge与container没有嵌套关系:
    这应该算是IE的一个bug,个人对display:inline-block理解有限。edge可以看作一个填充,container现在是一个上下居中的对象,加了背景色能看的更清楚,当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素,在内部添加块级元素是不标准的逻辑。

    以下是引用片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><BR>
<title>无标题文档</title>
<style type="text/css">
<!--body { margin:0; height:100%;}
#edge { width:0; height:100%; display:inline-block; vertical-align:middle;}#container { text-align:center; width:100%; display:inline-block; vertical-align:middle;}-->
</style>
</head>
<body>
<!-- required for xhtml1.1 validation only -->
<span id="edge"></span><span id="container">
<div style="width:200px; height:50px; background:#f00; line-height:50px;">仅IE6.0环境下实现</div>
</span>
</body>
</html>

    4.  CSS行为expression控制实现,不过expression为IE独有,并且耗资源严重,尤其在大量使用的时候。(标准)

    注意关键定义,不要以为height:100%在IE内是没用的:

    实时获取屏幕高宽值,分别减去容器高宽值再除以2,得到准确坐标绝对定位:

    以下是引用片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title><style type="text/css"><!--html,body { height:100%;}--></style></head><body><div style="background:#f00; position:absolute; left:expression((body.clientWidth-50)/2); top:expression((body.clientHeight-50)/2);width:50px;;height:50px;"></div>

本新闻共2页,当前在第1页  1  2  

作者:佚名
本信息来自媒体和网友上传,真实性未经证实,仅供您参考。未经许可,不得转载。
    相关资讯
10个你未必知道的CSS技巧CSS的常规使用技巧
XHTML+CSS:调用样式表CSS的十八般技巧
为什么要使用CSS?改善网站为xhtml+CSS
巧用CSS制作树状目录巧用CSS动态控制文本的属性
巧用CSS制作特效菜单
高性能的网站开发:标识/CSS优化
    热门商机推荐

 
    重点展会推荐