• 2008-12-11

    垂直和水平居中的浮动div(兼容ie&ff&opera) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/32377876.html

    写一段多浏览器兼容的浮动div居中代码,存档。
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>at center</title>
    </head>
    <script>
    function floatdiv()
    {
    document.getElementById("mydiv").style.left=(document.body.offsetWidth-document.getElementById("mydiv").offsetWidth)/2+document.body.scrollLeft;
    document.getElementById("mydiv").style.top=(document.body.clientHeight-document.getElementById("mydiv").offsetHeight)/2+document.body.scrollTop;
    }
    window.onload=floatdiv;
    window.onscroll=floatdiv;
    </script>
    <body>
    <div id=mydiv style="position:absolute;width:400px;height:200px;background:lightgreen;border:1px solid yellow;line-height:200px;vertical-align:middle;text-align:center">welcome</div>
    <p>ballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballack</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p>
    </body>
    </html>

    分享到: