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!
