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

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

Inline-Block-Elemente verhalten sich anders als Blockelemente, wenn es um die Randautomatik geht. In Blockelementen margin:auto; Zentriert das Element horizontal innerhalb seines übergeordneten Containers. Allerdings gilt in Inline-Block-Elementen margin:auto; hat keine Auswirkung.

Beispiel:

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}</code>

In diesem Beispiel ist das Containerelement als Inline-Block festgelegt. Wenn margin:auto; auf das Element angewendet wird, zentriert es den Container nicht innerhalb seines übergeordneten Containers.

Lösung:

Um ein Inline-Block-Element zu zentrieren, können Sie Text- Ausrichten: Auf dem übergeordneten Element zentrieren.

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

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

Jetzt wird das Containerelement horizontal innerhalb des Mittelteils zentriert.

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