怎么用js来控制div页面居中的有关问题？麻烦大神指教
日期：2014-05-16 浏览次数：20431 次
如何用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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
