層的絕對居中應(yīng)用
1、利用負(fù)邊距方法,絕對定位使容器相對屏幕絕對居中,此時的被嵌套容器只能為絕對大小。(標(biāo)準(zhǔn))
<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測試通過。(標(biāo)準(zhǔn))
注意height:100%是關(guān)鍵,edge與container沒有嵌套關(guān)系:
<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環(huán)境下實(shí)現(xiàn)</div>
</span>
還有不介紹了...
posted on 2008-12-15 11:36 小卓 閱讀(342) 評論(0) 編輯 收藏 所屬分類: html and js