html - 如何居中可变长度提交按钮？

Question

当在 Firefox 中而不是在 Google Chrome 中查看时，元素内部和外部的以下input type=submit按钮将居中：divmargin: auto

HTML：

<div>
 <input type=submit value=submit>
</div>
<input type=submit value=submit>
text continues from here...

CSS：

div {
 width: 200px;
 background: green;
}

input {
 display: block;
 margin: auto;
}

根据W3C，是否有正确的行为？以及如何在谷歌浏览器中将其居中，注意宽度必须是一个变量，并且必须从下面的文本中清除按钮？

score 2 · Accepted Answer

我怀疑问题在于您没有在输入上定义宽度，因此它没有执行自动边距。

INPUT是一个内联元素，所以它最容易用内联元素的样式设置样式，例如text-align: center父元素上的 a。

http://jsfiddle.net/chrisvenus/wU5tb/是一个小提琴，展示了放置text-align: center两个相关父元素（div 和 body）的效果。

因为这是为父元素设置样式，所以您可能会发现自己需要添加一些额外的块元素（例如p或div根据需要）以采用居中样式。

我已经在 chrome、firefox 和 IE 上对此进行了测试，并且都按预期运行。

score 0 · Accepted Answer

用于align="center"使您的 div 内容/按钮居中。

<div align="center">
   <input type=submit value=submit>
</div>

2 回答 2