Javascript DOM - 将文本元素对齐到中心？答案

【问题标题】：Javascript DOM - aligning a text element to the center?Javascript DOM - 将文本元素对齐到中心？
【发布时间】：2011-08-16 08:08:49
【问题描述】：

我有一个文本节点附加到我想放置在页面中间的 div 上。这些元素附加到一个类似于整个页面的 mainDiv。这是我正在尝试的代码：

title = document.createElement('div');
title.appendChild(document.createTextNode("The big title!"));
title.style.color = "#F5AE20";
title.style.textAlign = "center"; //this is what I'm trying to solve my problem

mainDiv.appendChild(title);

不幸的是，标题停留在页面的左上角；我希望它居中。编辑 - 澄清一下，如果可能的话，我想在 Javascript 中执行此操作。

感谢您的帮助。

【问题讨论】：

jsfiddle.net/userdude/eN3Mc 你的代码似乎可以工作，所以我猜它与父元素的宽度/定位/浮动/等有关...
同意@Jared。您的代码对我来说工作正常。如果父元素是浮动的或绝对位置，这肯定会解释为父元素将包裹到最宽子元素的大小。
父级实际上只是（在 html 中）

标签： javascript html css dom position

【解决方案1】：

仅从您发布的内容来看，我们无法给您一个明确的答案。

我们需要考虑您的 CSS 中定义的内容以及您插入的 DIV 的父项。

例如，将左右边距设置为自动对于没有定义宽度的 div 不起作用，而将 text-align 设置为居中对于宽度为已经被约束了。

以下是一些绝对有效的示例代码：

<html>
<head>
<script type="text/javascript">
function displayResult()
{
title = document.createElement('div');
title.appendChild(document.createTextNode("The big title!"));
title.style.color = "#F5AE20";
title.style.textAlign = "center"; //this is what I'm trying to solve my problem

document.getElementById("div1").appendChild(title); 
}
</script>
</head>
<body>

<div id="div1">This is some text.</div>
<br />

<button type="button" onclick="displayResult()">Align text</button>

</body>
</html>

【讨论】：

mainDiv 没有被约束，目前没有 css 代码。

【解决方案2】：

尝试将左右边距设置为“自动”

【讨论】：

这听起来有点像评论... ;)