<input> con display: block dentro de un texto-align: center div

Question

con esto:

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

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

Pero, añadir "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 con el centro en IE7 - y se no alineados con el centro en FF, Chrome y IE8.

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

Answer 1

esta manera se puede trabajar:

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

para forzar una entrada de bloque (originalmente pantalla: elemento en línea) que se centra, se tiene que establecer un ancho fijo y luego el margen a 0 automático;)

Answer 2

Elementos que se muestran como blocks are centred with auto margins. La propiedad text-align solo debe centrarse en inline children. Internet Explorer tiene errores que rodean esto.

Answer 3

del css standard:

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

así que cuando sus elementos (no importa lo que son, divs, luces, entradas, etc. .) están en línea, text-align tiene un efecto sobre ellos, y cuando se muestran: bloque, por definición estándar, text-align no los alineará

puede solucionar esto estableciendo margin: 0 auto y arreglando un ancho , me gusta steweb sugirió, o alternativamente (en función de sus necesidades específicas):

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