Wie zentriert man Divs horizontal innerhalb eines Containers?

Horizontale Ausrichtung von Divs innerhalb eines Containers

Beim Versuch, Divs innerhalb eines Containers horizontal zu zentrieren, kann es zu Schwierigkeiten kommen. Dies ist häufig auf das Standardverhalten von float: left zurückzuführen.

Um dieses Problem zu beheben, sollten Sie display: inline-block anstelle von float für die Divs verwenden. Diese Technik macht die manuelle Berechnung von Rändern überflüssig und ermöglicht eine reaktionsfähige Ausrichtung.

Zum Beispiel im folgenden CSS:

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>

Das Div mit der Klasse „Block“ verhält sich wie ein Inline-Element und richtet sich horizontal innerhalb des Container-Divs mit der Klasse „row“ aus.

Zusätzlich für Fälle, in denen es ein Zeilen-Div mit nur einem Block gibt div, Sie können es mit text-align: center:

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

zentrieren

Das obige ist der detaillierte Inhalt vonWie zentriert man Divs horizontal innerhalb eines Containers?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!