javascript - 在 DIV 内水平居中对象

Question

我试图将一个按钮水平居中在一个 div 中，但没有运气：

var x = document.createElement("div"); // the div container
x.style.backgroundColor = "red";
x.style.width = "200px";
x.style.height = "200px";   
document.body.appendChild(x);

var y = document.createElement("input"); // the button to be centered inside div "x"
y.type = "button";
y.value = "test button";
y.style.marginLeft = "auto";
y.style.marginRight = "auto";
x.appendChild(y);

我试着做y.style.textAlign = "center"，"y.style.margin = "auto 0"。我究竟做错了什么？

http://jsfiddle.net/5tffD/1/

Answer 1

做这个：

x.style.textAlign = 'center';

现场演示：http: //jsfiddle.net/5tffD/3/

无法单独对齐元素。您只能通过text-align在包含文本行的元素（在本例中为 DIV 元素）上设置属性来将文本行作为一个整体对齐。

请注意这与vertical-align属性有何不同，后者确实使您能够单独对齐元素。

Answer 2

这里有几种居中的方法：

1）div内的任何东西：

<div align="center"> text or smth </div>

2）对于文本（也可能是图像）：

<center> text </center>

3) 对于帧或图像

<img style="display:block;margin-left:auto;margin-right:auto;" align="center" src="imageee.jpg" />

4）只是定位正确：

<div style="width:80%;margin-left:10%;"> content </div>