div mit Anzeige: Inline-Blockrand 0 automatisch nicht zentriert

72 
<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>
html css etlds
quelle
Laut @ Xander-Kommentar wird ein DIV ohne Breite auf 100% seines Containers erweitert. "Margin: 0 auto" wird also wahrscheinlich keinen Effekt zeigen, da Sie etwas benötigen, das kleiner als 100% Breite ist. Wenn Sie nur versuchen, die Schaltfläche zu zentrieren, warum nicht einfach Text ausrichten? dh. "text-align: center" im DIV-Stil. Ich denke, INPUT-Tags sind natürlich inline, also sollte es sich innerhalb des DIV>
jmbertucci
1
@Fozzyuw, egal welche Breite notwendig ist oder nicht, wenn wir display: inline-block setzen, wird die Breite gleich ihrem Inhalt gesetzt.
etlds
Ihr zweites Beispiel funktioniert, weil Sie das entfernt haben display: inline-block. Wenn Sie es wieder hinzufügen, hat das Einstellen der Breite keine Auswirkung. Siehe jsfiddle.net/anEvF
Olaf Dietsche
1
Wenn Sie auf diesen Thread stoßen, aber keine der Antworten für Sie funktioniert, überprüfen Sie, ob Ihr Div nicht schwebt. margin: autospielt nicht gut mit float.
Skibulk

Antworten:

148

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.

Koloss
quelle
11
@kapa Ich weiß, dass dies ein alter Kommentar ist, aber ich würde das wahrscheinlich als positiv betrachten. :)
Mawburn
52

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>
Rok Kralj
quelle
15
text-align: center;zentriert den Inline- Inhalt des Div, nicht des Div selbst.
Yatskevich
Verzeihung, ich habe vergessen, das CSS zu löschen. Es tut uns leid.
Rok Kralj
Nein, das will ich nicht. Ich möchte das Div selbst zentrieren.
etlds
2
Genau das, was ich brauchte. Vielen Dank.
Duarte Cunha Leão
2
Hinweis: Diese Diskussion ist veraltet. Die Antwort wurde seitdem so bearbeitet, dass sie ein Wrapper-Div enthält, sodass das innere, ursprüngliche Div zentriert ist. Also ist es was er will.
Kevin Wheeler
1

Versuchen

body {text-align: center;}
Alan
quelle