table

层的绝对居中应用

1、利用负边距方法,绝对定位使容器相对屏幕绝对居中,此时的被嵌套容器只能为绝对大小。(标准)
<div style="background:#f00; width:740px; height:340px; left:50%; margin:-170px 0 0 -370px; position:absolute; top:50%;"></div>

2、老外给出的另类方法,巧妙利用display:inline-block;,IE6.0测试通过。(标准)

注意height:100%是关键,edge与container没有嵌套关系:

<style>
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>

<!-- 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>

还有不介绍了...

posted on 2008-12-15 11:36 小卓 阅读(279) 评论(0)  编辑  收藏 所属分类: html and js


只有注册用户登录后才能发表评论。


网站导航: