<input> con display: block all'interno di un text-align: centro div

Question

Con questa:

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

Il pulsante è allineato al centro della finestra del browser (come desiderato) in FF, Chrome, IE7 e IE8.

Ma, aggiungere "display: block" al pulsante:

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

Il pulsante è allineato al centro in IE7 - ed è non allineato al centro in FF, Chrome e IE8.

Perché? E un pulsante (o qualsiasi altro <input>) con display: il blocco deve essere allineato al centro in qualche modo? (diverso dal centro < - che funziona su tutti i browser menzionati, btw - ma è "vietato" ...)

Answer 1

In questo modo si può lavorare:

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

per forzare un ingresso di blocco (in origine di visualizzazione: elemento inline) deve essere centrato, si devo impostare una larghezza fissa e quindi il margine a 0 auto;)

Answer 2

Elementi visualizzati come blocks are centred with auto margins. La proprietà text-align dovrebbe centrare solo inline children. Internet Explorer ha bug che lo circondano.

Answer 3

dal css standard:

Questa proprietà descrive come il contenuto in linea di un blocco vengono allineate orizzontalmente

modo che quando gli elementi (non importa quello che sono, div, campate, ingressi, ecc .) sono allineati, l'allineamento del testo ha un effetto su di essi e quando vengono visualizzati: blocco, per definizione standard, allineamento del testo non li allinei

è possibile risolvere questo impostando margine: 0 auto e fissa una larghezza , piace steweb suggerito, o, in alternativa (a seconda delle specifiche esigenze):

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