Warum werden meine Divs nicht horizontal innerhalb des enthaltenden Divs zentriert?

Horizontale DIV-Ausrichtung zentrieren

Sie sind auf ein Problem gestoßen, bei dem Ihre Divs nicht horizontal innerhalb des enthaltenden Div ausgerichtet werden können. Hier ist eine häufige Abfrage und Lösung:

Frage

Warum werden meine Divs nicht horizontal innerhalb des enthaltenden Divs zentriert?

Beispiel-HTML:

<code class="html"><div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div></code>

Beispiel-CSS:

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

Lösung

Um eine horizontale Zentrierung zu erreichen, sollten Sie die Verwendung von display: inline-block anstelle von float in Betracht ziehen. Diese Methode ermöglicht es Divs, sich wie Inline-Elemente zu verhalten und gleichzeitig Eigenschaften auf Blockebene wie Breite und Höhe beizubehalten.

Aktualisiertes CSS:

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

Mit dieser Änderung sollten Ihre Divs innerhalb der horizontal ausgerichtet werden enthält div.

Das obige ist der detaillierte Inhalt vonWarum werden meine Divs nicht horizontal innerhalb des enthaltenden Divs zentriert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!