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.

Darüber hinaus können Sie in Fällen, in denen es ein Zeilen-Div mit nur einem Block-Div gibt, es mit text-align: center zentrieren:

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

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!