<input> mit Display: Block in einem text-align: center div

Question

mit diesem:

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

Der Knopf zum Zentrum des Browserfensters ausgerichtet ist (wie gewünscht) in FF, Chrom, IE7 und IE8.

Aber, fügen Sie "display: block" auf die Schaltfläche:

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

Die Taste zum Zentrum in IE7 ausgerichtet ist - und wird nicht zum Zentrum in FF, Chrome und IE8 ausgerichtet ist.

Warum? Und kann eine Taste (oder ein <Eingang>) mit Display: Block in der Mitte zentriert werden? (anders als mit <Center> - das funktioniert auf allen genannten Browsern, BTW - aber ist "verboten" ...)

Answer 1

Auf diese Weise es funktionieren kann:

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

einen Blockeingang zu erzwingen (ursprünglich display: inline-Element) zentriert werden, Sie muss eine feste Breite und dann der Rand auf 0 auto;)

Answer 2

Elemente, die als blocks are centred with auto margins angezeigt werden. Die text-align Eigenschaft sollte nur inline children zentrieren. Internet Explorer hat Fehler, die das umgeben.

Answer 3

vom css standard:

Diese Eigenschaft beschreibt, wie Inline-Inhalt eines Blocks horizontal

ausgerichtet sind

so, wenn Sie Ihre Elemente (egal, was sie sind, divs, Spannweiten, Eingänge, etc .) sind inline, text-align hat einen Einfluss auf sie, und wenn sie angezeigt werden: Block, nach Standard-Definition, Text-Align wird sie nicht ausrichten

Sie können dies beheben, indem Sie margin: 0 auto und Fixieren einer Breite , mögen steweb vorgeschlagen, oder alternativ (je nach Ihren spezifischen Anforderungen):

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