Kann Inline-Block mit Text-Align: Center Display: Table für horizontale Zentrierung ersetzen?

Mittige Anzeige mit Inline-Block: Eine alternative Lösung

Beim horizontalen Ausrichten von Elementen mit Umbruch besteht der übliche Ansatz darin, display:table für den Umbruch zu verwenden. Einige bevorzugen jedoch möglicherweise eine Lösung mit display: block oder display: inline-block.

Die ursprüngliche Lösung stellte ein Problem dar: Die erforderliche display:-Tabelle wurde „umbrochen“, um die gewünschte Ausrichtung zu erreichen. Ein modifizierter Ansatz entstand mit der Einführung von text-align:center, das auf das Body-Element angewendet wird, und display:inline-block, das dem Wrap zugewiesen wird. Durch das Entfernen von display:table gelangen wir zu einer alternativen Lösung, die Elemente effektiv zentriert ausrichtet, ohne eine feste Breitenbeschränkung aufzuerlegen.

Aktualisierter Code:

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Diese Änderung behält die gewünschte Ausrichtung bei und bietet gleichzeitig einen saubereren und möglicherweise bevorzugten Ansatz für bestimmte Szenarien.

Das obige ist der detaillierte Inhalt vonKann Inline-Block mit Text-Align: Center Display: Table für horizontale Zentrierung ersetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!