怎么用js来控制div页面居中的有关问题？麻烦大神指教

2012-03-21

如何用js来控制div页面居中的问题？麻烦大神指教如题，有人知道的麻烦附上代码，谢谢![解决办法]HTML code!D

如何用js来控制div页面居中的问题？麻烦大神指教
如题，有人知道的麻烦附上代码，谢谢!

[解决办法]

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>    <title>Div Align Center</title>    <script type="text/javascript">        window.onload = function() {            var myDiv = document.getElementById("myDiv");            myDiv.align = "center";        }    </script></head>    <body>        <div id="myDiv">Div Align Center....</div>    </body></html>
[解决办法]
HTML code<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>    var doClick=function(param){        if(param==0){            document.body.style.textAlign="left";        }else if(param==1){            document.body.style.textAlign="center";        }else{            document.body.style.textAlign="right";        }    }    </script><style></style></head><body onload="doLoad();"><div id="div1" style="width:500px; height:300px; background-color:#0CC;" >    sssssssssssssssssssss</div><input type="button" onclick="doClick(0)" value="左"/><input type="button" onclick="doClick(1)" value="中"/><input type="button" onclick="doClick(2)" value="右"/></body></html>
[解决办法]
HTML code<div id="box" style="width:400px;height:200px;background-color:#f00;position:absolute;"></div><script type="text/javascript">    var box=document.getElementById('box');    box.style.left=Math.floor((document.documentElement.clientWidth-400)/2)+'px';    box.style.top=Math.floor((document.documentElement.clientHeight-200)/2)+'px';</script>
[解决办法]
你是要在某个元素内居中还是在浏览器可视范围内居中？
而且你只是要水平居中还是水平和垂直都居中？
如果在元素内水平居中直接用text-align的css样式来控制，js就如上面的
如果是在浏览器可视范围内居中js实现的话
可以先获取 可视范围的高宽 如
document.documentElement.clientHeight
document.documentElement.clientWidth
然后获取元素的 的高宽 如
document.getElementbyId("xx").offsetHeight
document.getElementbyId("xx").offsetWidth
然后再控制元素的位置如
top:(可视范围高度- 当前元素高) / 2;

[解决办法]
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></head><body>    <div id="align" style="width: 600px; height: 300px; border: 1px solid black;"></div>    <script>        function addClass(elem, clz){            var className = elem.className            elem.className = className === "" ? clz : (className + " " + clz);        }        addClass(document.getElementById('align'), "center");    </script></body></html>

热点排行

JavaScript

怎么用js来控制div页面居中的有关问题？麻烦大神指教