javascript - 如何使表单的子元素居中？

Question

我有一个我在 javascript 中动态创建的表单，并以如下方式结束：

mybreak=document.createElement("p");
form.appendChild(mybreak);

var buttonElement = document.createElement('button');
buttonElement.setAttribute("type","submit");
buttonElement.innerHTML="<img src=\"images/lock.png\"  width=\"80\" height=\"80\" alt=\"Submit\"/>Try it!";
form.appendChild(buttonElement);

这导致我的提交按钮在页面上左对齐。我希望它以页面为中心。添加 innerHTML 使按钮内的文本居中，这不是我想要的。为我的孩子添加 align = center 属性具有相同的效果。

我在这里缺少什么技巧才能使提交按钮很好地位于页面中心？

谢谢

Answer 1

将一些 CSS 添加到<p>保存按钮的位置。

p {
    text-align:center;
}

Answer 2

使用 CSS：

#element_containing_submit_btn { text-align: center; }

http://jsfiddle.net/egd9G/

Answer 3

回答我自己的问题我觉得很奇怪，但我所追求的是理解如何严格从 javascript 中将我的提交按钮居中，因为我是动态创建表单并且只需要最后一个提交按钮居中。

解决方案是简单地修改我的原始代码如下：

 newDiv = document.createElement("div");
 newDiv.setAttribute("align","center");

 var buttonElement = document.createElement('button');
 buttonElement.setAttribute("text-align","center");
 buttonElement.setAttribute("type","submit");
 buttonElement.innerHTML="<img src=\"images/lock.png\"  width=\"80\" height=\"80\" alt=\"Submit\"/>Try it!";
 newDiv.appendChild(buttonElement);
 form.appendChild(newDiv);