Warum zentriert „margin: auto;' Inline-Block-Elemente nicht horizontal?

margin:auto; in Inline-Block-Elementen

Beim Anwenden von margin:auto; Bei einem Div mit Inline-Block-Anzeige kann es sein, dass das Div nicht wie erwartet horizontal zentriert wird. Dies liegt daran, dass sich Inline-Blockelemente wie Inline-Elemente verhalten und entlang der Seite fließen.

Im bereitgestellten Code:

Alter Code (funktioniert)

<code class="css">#container {
  width: 200px;
  ...
}</code>

Dem Div wird eine bestimmte Breite zugewiesen, um sicherzustellen, dass es in seinen übergeordneten Container passt.

Neuer Code (funktioniert nicht)

<code class="css">#container {
  display: inline-block;
  ...
}</code>

Einstellung display: Inline-Block ermöglicht es dem Div, abhängig von seinem Inhalt zu schrumpfen und zu wachsen, was zu einer falschen Ausrichtung führt.

Um das Div zu zentrieren, erfordert der Code:

Lösung

1. Text hinzufügen-align: center; zum enthaltenden Element (.center im Beispiel).

<code class="css">.center {
  text-align: center;
}</code>

Dadurch wird sichergestellt, dass das Inline-Block-Div zentriert ist.

<code class="html"><div class="center">
  <div class="MtopBig" id="container">...</div>
</div></code>

Das obige ist der detaillierte Inhalt vonWarum zentriert „margin: auto;' Inline-Block-Elemente nicht horizontal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!