如何使表单的子元素居中？答案

【问题标题】：How to center a child element of a form?如何使表单的子元素居中？
【发布时间】：2012-09-11 18:29:35
【问题描述】：

我有一个我在 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 属性也有同样的效果。

让提交按钮很好地位于页面中心的技巧是什么？

谢谢

【问题讨论】：

标签： javascript forms element center

【解决方案1】：

向持有按钮的<p> 添加一些CSS。

p {
    text-align:center;
}

【讨论】：

很抱歉，但我仍然不清楚如何通过 javascript 完成此操作，因为我正在动态创建表单。
只需链接到样式表或在页面头部添加样式。

【解决方案2】：

使用 CSS：

#element_containing_submit_btn { text-align: center; }

http://jsfiddle.net/egd9G/

【讨论】：

【解决方案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);

【讨论】：