Wie kann ich ein Blockelement nur mit „display: inline-block' in CSS zentrieren?

Zentrierte Anzeige mit Inline-Block in CSS

Im angegebenen Code wird der Textkörper mithilfe von text-align:center zentriert ausgerichtet . Die .wrap-Klasse, die zuvor display:table zur Ausrichtung verwendete, nutzt jetzt display:inline-block. Dies ermöglicht ein flexibleres Layout im Vergleich zur Verwendung einer tabellenartigen Anzeige.

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

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

Mit diesen Änderungen behält das .wrap-Element seine Ausrichtung in der Mitte der Seite bei, während der darin enthaltene Inhalt fließen kann natürlich, als wäre es Teil des Inline-Textes. Dieser Ansatz macht die zusätzliche Regel display:table überflüssig, was zu einem schlankeren und vielseitigeren CSS-Code führt.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Blockelement nur mit „display: inline-block' in CSS zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!