js使用div内容居中
button.setAttribute("type","button");
button.setAttribute("id","button1");
使按钮在div里面是居中，要用js，不要html的 展开
1、准备好一个空的html结构的文档。
2、接下来要准备的是准备一个div用来放内容了，这里为了显示特意给div设置了边框。
3、接下来就在div中添加内容，如下图所示，运行后会发现内容偏向于左上角。
4、给div设置水平居中，如下图所示，并且设置行高为div的高度，会发现它水平垂直居中了。
5、让其display属性为table-cell，知道table单元格中可以通过vertical-align垂直居中，转化后也可以用此属性。
6、运用display转化后会发现margin的auto属性不起作用了。
text-align: center;
line-height:100px; /*行间距和div宽度相同*/
}
</style>
<body>
<div id="main">
<div id="content">
Sun
</div>
</div>
<script type="text/javascript">
window.onload = function() {
// 获取浏览器窗口
var windowScreen = document.documentElement;
// 获取main的div元素
var main_div = document.getElementById("main");
// 通过窗口宽高和div宽高计算位置
var main_left = (windowScreen.clientWidth - main_div.clientWidth)/2 + "px";
var main_top = (windowScreen.clientHeight - main_div.clientHeight)/2 + "px";
// 位置赋值
main_div.style.left = main_left;
main_div.style.top = main_top;
// 获取mcontent的div元素
var content_div = document.getElementById("content");
var content_left = (main_div.clientWidth - content_div.clientWidth)/2 + "px";
var content_top = (main_div.clientHeight - content_div.clientHeight)/2 + "px";
content_div.style.left = content_left;
content_div.style.top = content_top;
}
</script>
</body>
扩展资料
Div上下居中代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<title>Div上下居中－www.51windows.Net</title>
<head>
<meta name="keywords" content="51windows.Net">
<meta http-equiv=content-type content="text/html; charset=gb2312">
</head>
<body>
<div style="position: absolute; top: 200; left: 0; width: 300; height: 200;border: 1 solid #C0C0C0;">
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了
center</div>
</div>
<div style="border: 1 solid #C0C0C0;">
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了
center</div>
</div>
</body>
</html>
设置该div的样式为'text-align:center'，使得内容居中。
1、定义一个div
<div style="height:105px;width:180px" id='sd'>
11111
</div>
2、js修改该div的样式
var d1 = document.getElementById('sd');//获取该div节点
d1.style.cssText += 'text-align:center';//通过cssText属性赋值文本居中样式。
button.style.margin="0 auto";
就可以了~
不行呢
SCRIPT5007: 无法获取属性“style”的值: 对象为 null 或未定义 ，
我的div id名字是box，改为box.style.textAlign="center";才是对的
不过我只有一个想要居中，不是全部
那你把要居中的那个放到一个层里面，然后在设置那个层里面的内容居中
