<input> with display:block inside a text-align:center div

Question

With this:

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

The button is aligned to the center of the browser window (as desired) in FF, Chrome, IE7 and IE8.

But, add "display:block" to the button:

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

The button is aligned to the center in IE7 - and is not aligned to the center in FF, Chrome and IE8.

Why? And can a button (or any <input>) with display:block be center-aligned in some way? (other than using <center> - which works on all browsers mentioned, btw - but is "forbidden"...)

Answer 1

This way it can work:

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

To force a block input (originally display:inline element) to be centered, you have to set a fixed width and then the margin to 0 auto ;)

Answer 2

from the css standard:

This property describes how inline contents of a block are horizontally aligned

so when your elements (no matter what they are, divs, spans, inputs, etc.) are inline, text-align has an affect on them, and when theyre display:block, by standard definition, text-align will not align them

you can fix this by setting margin:0 auto and fixing a width, like steweb suggested, or alternatively (depending on your specific requirements):

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