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

Question

div 元素内部和外部的以下 input type=submit 按钮在 Firefox 中查看时以 margin: auto 居中，但在 Google 中不显示 Chrome :

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，有正确的行为吗？以及如何在 Google Chrome 中将其居中并指出宽度必须是一个变量并且按钮必须从下面的文本中清除？

Answer 1

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

INPUT 是一个内联元素，因此使用内联元素样式的方式设置它的样式最简单，例如父元素上的 text-align: center。

http://jsfiddle.net/chrisvenus/wU5tb/是一个显示将 text-align: center 放在两个相关父元素(div 和 body)上的效果的 fiddle 。

因为这是父元素的样式，您可能会发现自己需要放入一些额外的 block 元素(例如 p 或 div，视情况而定)以采用居中样式。

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