<input> with display：block in text-align：center div

Question

有了这个：

<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
  <input type="button" value="push me" />
</div>

该按钮与FF，Chrome，IE7和IE8中的浏览器窗口中心（根据需要）对齐。

但是，在按钮上添加“display：block”：

<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
  <input type="button" style="display:block;" value="push me" />
</div>

该按钮与IE7中的中心对齐 - 并且未与 FF，Chrome和IE8中的中心对齐 。

为什么？ 并且带有display：block的按钮（或任何<input>）可以以某种方式居中对齐吗？ （除了使用<center> - 适用于所有提到的浏览器，顺便说一句 - 但是“禁止”......）

Answer 1

这样它可以工作：

<input type="button" style="width:100px;margin:0 auto;display:block;" value="push me" />

要强制块输入（最初显示：内联元素）居中，您必须设置固定宽度，然后将边距设置为0 auto;）

Answer 2

来自css标准 ：

此属性描述块的内联内容如何水平对齐

所以当你的元素（无论它们是什么，div，spans，input等）是内联的时，text-align会对它们产生影响，当它们显示时：block，按标准定义，text-align不会对齐它们

您可以通过设置margin：0 auto和固定宽度来修复此问题，如steweb建议，或者（根据您的具体要求）：

<input type="button" style="display:inline-block;" value="push me" />

Answer 3

显示为块的元素以自动边距为中心 。 text-align属性应该只对内联子项进行居中。 Internet Explorer存在错误。