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