js控制div居中的有关问题,求大神指教~
js控制div居中的问题,求大神指教~~急急急~~~
如题,麻烦知道的附上代码,谢谢
------解决方案--------------------
宽度
浏览器的宽度减去你的DIV的宽度,然后,除以2
高度
浏览器的高度减去你的DIV的高度,然后,除以2
------解决方案--------------------
刚才在网上找到了一个取得document高度的方法,
下面的代码可以实现上下左右居中了, 代码可以运行。。。。。
工作啦
如题,麻烦知道的附上代码,谢谢
------解决方案--------------------
宽度
浏览器的宽度减去你的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>