js控制div居中的有关问题，求大神指教~-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20324 次

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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>