div mit Anzeige: Inline-Blockrand 0 automatisch nicht zentriert

<div style="display: inline-block; margin: 0 auto;">
    <input id="abc" type="button" value="button" />
</div>

Ich versuche, den obigen Code zu verwenden, um die Breite des Inhalts gleich einzustellen, und zentriere ihn dann mit dem Rand: 0 auto;

Aber es hat bei mir in keinem Browser funktioniert. Irgendein Vorschlag?

Übrigens, wenn ich die width-Eigenschaft einstelle, funktioniert es gut.

<div style="width: 10em; margin: 0 auto;">
    <input id="abc" type="button" value="button" />
</div>

Anzeige: Tabelle; würde es auch in der Mitte positionieren:

CSS:

  .button{
    display: table;
    margin: 0 auto;
    }

HTML:

<div class="button">
<input id="abc" type="button" value="button" />
< /div>

Hinweis: Die Verwendung von Inline-Stilen ist eine schlechte Vorgehensweise.

Da Sie DIV angefordert haben inline-block, text-align: center;ist die Antwort.

<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
    <input id="abc" type="button" value="button" />
</div>
</div>

Versuchen

body {text-align: center;}