<input> con display: bloque dentro de text-align: center div - html, css

Con este:

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

El botón se alinea con el centro de la ventana del navegador (como se desee) en FF, Chrome, IE7 e IE8.

Pero, agregue "display: block" al botón:

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

El botón está alineado al centro en IE7 y está no alineado al centro En FF, Chrome e IE8.

¿Por qué? ¿Y puede un botón (o cualquier <entrada>) con pantalla: bloque estar alineado en el centro de alguna manera? (aparte de usar <center> - que funciona en todos los navegadores mencionados, por cierto - pero está "prohibido" ...)

Respuestas

De esta manera puede funcionar:

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

Para forzar que una entrada de bloque (originalmente se muestre: elemento en línea) se centre, debe establecer un ancho fijo y luego el margen a 0 auto;)

desde el css standard:

Esta propiedad describe cómo los contenidos en línea de un bloque están alineados horizontalmente

así que cuando tus elementos (no importa lo que son,divs, spans, entradas, etc.) están en línea, text-align los afecta, y cuando se muestran: bloque, por definición estándar, text-align no los alineará

puede solucionar este problema estableciendo el margen: 0 automático y corrigiendo un ancho, como sugirió steweb, o alternativamente (según sus requisitos específicos):

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

Elementos que se muestran como Los bloques se centran con márgenes automáticos.. los text-align la propiedad solo debe centrarse niños en línea. Internet Explorer tiene errores que rodean esto.