Im Folgenden finden Sie mehrere englische Frage- und Antworttitel, die zum Inhalt des Artikels passen: 1. **Warum funktioniert „margin: auto' nicht bei Inline-Block-Elementen?** 2. **Wie zentriere ich Inline-Block-Elemente ohne „margin: auto'?** 3. **Warum schlägt Margin: Auto für Inline-Bl. fehl?

Warum funktioniert „margin: auto“ nicht für Inline-Blockelemente?

In CSS wird die Eigenschaft margin: auto verwendet, um gleichmäßigen Leerraum um ein Element herum zu erstellen. Es funktioniert jedoch möglicherweise nicht, wenn dieses Attribut auf ein Inline-Blockelement angewendet wird. Dies liegt daran, dass Inline-Blockelemente ähnlich wie Textelemente auf der Seite fließen.

Wenn Sie einem Element den Stil „display: inline-block“ zuweisen, beginnt es als einzelnes Wort oder Bild auf der Seite zu fließen. Deshalb kann margin: auto keinen einheitlichen Leerraum erzeugen, da das Element selbst nicht den gesamten horizontalen Raum einnimmt.

Um dieses Problem zu beheben, müssen Sie die Ausrichtung des Containerelements auf Mitte setzen (text-align: center), anstatt zu versuchen, das Inline-Blockelement direkt zu zentrieren. Das Containerelement nimmt den gesamten horizontalen Raum ein und zentriert das Inline-Blockelement darin.

Korrigiertes Codebeispiel:

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}</code>

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

Mit dieser Methode wird das Inline-Blockelement erfolgreich zentriert, auch wenn es nicht mehr direkt durch das Attribut „margin: auto“ gesteuert wird.

Das obige ist der detaillierte Inhalt vonIm Folgenden finden Sie mehrere englische Frage- und Antworttitel, die zum Inhalt des Artikels passen: 1. **Warum funktioniert „margin: auto' nicht bei Inline-Block-Elementen?** 2. **Wie zentriere ich Inline-Block-Elemente ohne „margin: auto'?** 3. **Warum schlägt Margin: Auto für Inline-Bl. fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!