日期:2014-05-16  浏览次数:20285 次

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>