Warum funktioniert „margin: auto;' nicht bei Inline-Block-Elementen?

margin:auto; Funktioniert nicht bei Inline-Block-Elementen

In CSS margin:auto; wird häufig verwendet, um Blockelemente auf einer Seite horizontal zu zentrieren. Bei Anwendung auf Inline-Block-Elemente wird diese Eigenschaft jedoch unwirksam.

Inline-Block-Elemente fließen wie Inline-Elemente inline in die Seite ein, können jedoch eine bestimmte Breite und Höhe haben. Dieses Verhalten führt zu Schwierigkeiten, wenn versucht wird, sie mithilfe von margin:auto; horizontal zu zentrieren.

Alter Code:

<code class="css">#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}</code>

In diesem Code hat das #container-Element ein spezifische Breite und löst das erwartete Zentrierungsverhalten aus.

Neuer Code:

<code class="css">#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}</code>

Das Ändern der Anzeigeeigenschaft von #container in inline-block ändert die Interaktion mit Rändern. Inline-Block-Elemente verhalten sich nicht wie Blockelemente und verlieren die Möglichkeit, mit margin:auto; zentriert zu werden.

Lösung:

So zentrieren Sie ein Inline-Block-Element Verwenden Sie horizontal stattdessen die Eigenschaft text-align: center für das enthaltende Element:

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

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

Dadurch wird das Inline-Block-Element an der Mitte seines enthaltenden Blockelements ausgerichtet.

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