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);

如何将表单的子元素居中？

3 个答案: