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/

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

请注意这与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>

在DIV内水平居中对象

2 个答案: