读书人

js控制div居中的有关问题求大神指教~

发布时间: 2012-04-12 15:46:35 作者: rapoo

js控制div居中的问题,求大神指教~~急急急~~~
如题,麻烦知道的附上代码,谢谢

[解决办法]
宽度
浏览器的宽度减去你的DIV的宽度,然后,除以2

高度
浏览器的高度减去你的DIV的高度,然后,除以2

[解决办法]
刚才在网上找到了一个取得document高度的方法,
下面的代码可以实现上下左右居中了, 代码可以运行。。。。。

工作啦


HTML code
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>无标题文档</title>    <style>        #align{            width: 600px;             height: 300px;             border: 1px solid black;        }        .center{            margin: 0 auto;        }    </style>        <script>      var adjustDivPosition = function() {          var docWidth = document.body.offsetWidth;                var docHeight= (            'innerHeight' in window? window.innerHeight :            document.compatMode!=='BackCompat'? document.documentElement.clientHeight : document.body.clientHeight        );        var divobj = document.getElementById("align");        var divWidth = divobj.offsetWidth;        var divHeight = divobj.offsetHeight;                 //让图片左右居中显示           var marginleft=(docWidth-divWidth)/2;           divobj.style.marginLeft = marginleft + "px";                    //让图片上下居中显示           var margintop=(docHeight-divHeight)/2;           divobj.style.marginTop = margintop + "px";         };      </script>      </head><body>    <div id="align"></div>    <script>      adjustDivPosition();    </script></body></html> 

读书人网 >JavaScript

热点推荐