如何通过DOM使div居中对齐？

Question

我有一个HTML代码：

<div id="first"></div>

我希望使用 JavaScript（document.findElementById）来更改 div 的行为，使其变为以下内容：

<div id="first" align="center"></div>

我该如何进行呢？

- azv

---

CakePHP如何从关联模型中限制记录数量 - calebds

Answer 1

document.getElementById("first").setAttribute("align", "center");

- Amir Pashazadeh

Answer 2

使用 element.setAttribute^MDN。

document.getElementById('first').setAttribute('align', 'center');

一种不过时的方法是对边距进行样式设置：

样式 边距：

document.getElementById('first').style.margin = '0 auto';

• DEMO

- calebds

Answer 3

如果该元素已经具有对齐属性，则此方法可行。

document.getElementById("first").attributes['align'] = 'center';

如果你还没有该属性，使用setAttribute。

document.getElementById('first').setAttribute('align', 'center');

- Shyju

Answer 4

document.getElementById('first').align = center

请参阅如何使用JavaScript向HTML元素添加/更新属性？

- TimCodes.NET

Answer 5

很遗憾，align属性已被弃用，不应再使用。

您可以通过设置样式margin属性来居中特定宽度的DIV，如下所示：

document.getElementById('first').style.marginLeft = 'auto';
document.getElementById('first').style.marginRight = 'auto';

如果您想修改“align”属性，可以这样做：

document.getElementById('first').align = 'center';

可以在这里找到使用CSS居中DIV的其他方法。

- JacobEvelyn

---

哈，但是你能否编写出准确模拟 align="center" 行为的 CSS 呢？你提供的链接只是皮毛而已。 - Mr Lister

“准确模拟align='center'的行为”是什么意思？将边距设置为“auto”是其中一种标准方法。 - JacobEvelyn

这就是为什么在我的原帖中我说“指定宽度的DIV”。一旦您在JSFiddle中给div设置CSS宽度，它就可以工作了。这是一个被充分记录的现象（一个解决方法在这里）。虽然这种情况很遗憾，而且使用align不会出现这种情况很好，但我们仍然面临着使用align已被弃用的事实。 - JacobEvelyn

哦，抱歉，我忽视了你JSFiddle的具体内容。你想要的需要更多CSS。通常来说，对于块元素，margin:0 auto;是正确的方法，而对于文本，你需要使用text-align:center;——请看这个JSFiddle。希望能有所帮助！另外，请注意查看将text-align:center;添加到p样式中（模拟你的JSFiddle），与将其添加到div样式中之间的区别。 - JacobEvelyn

不，margin:0 auto 不是正确的方法，因为它会干扰 <blockquote> 等具有自身边距的 div 中的元素。我仍在寻找最终的解决方案。 - Mr Lister