如何将窗体的子元素居中

How to center a child element of a form?

本文关键字：元素 窗体      更新时间：2023-09-26

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

我错过了什么技巧，让提交按钮很好地集中在页面上？

感谢

在包含按钮的<p>中添加一些CSS。

p {
    text-align:center;
}

使用CSS:

#element_containing_submit_btn { text-align: center; }

http://jsfiddle.net/egd9G/

我在回答自己的问题时感到奇怪，但我所追求的是了解如何严格从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);
相关文章：