Heim > Artikel > Web-Frontend > Wie zentriere ich Inhalte in einer Bootstrap-Spalte?
Inhalt in einer Bootstrap-Spalte zentrieren
Sie haben Schwierigkeiten, den Inhalt in einer Bootstrap-Spalte zu zentrieren. Ihr bereitgestellter HTML-Code enthält Folgendes:
<code class="html"><div class="row"> <div class="col-xs-1 center-block"> <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span> </div> </div></code>
Lösung:
Das Problem liegt in der Verwendung der „Center-Block“-Klasse. Diese Klasse wird in aktuellen Versionen von Bootstrap nicht mehr unterstützt. Stattdessen sollten Sie eine der folgenden Methoden verwenden:
Vor Bootstrap 3:
Verwenden Sie das „align“-Attribut:
<code class="html"><div class="col-xs-1" align="center"></code>
Bootstrap 3 und 4:
Verwenden Sie die Klasse „text-center“:
<code class="html"><div class="col-xs-1 text-center"></code>
Bootstrap 4:
Verwenden Flex-Klassen:
<code class="html"><div class="d-flex justify-content-center"> <div>some content</div> </div></code>
Hinweis: Bootstrap 4 richtet Inhalte standardmäßig horizontal aus. Für die vertikale Ausrichtung verwenden Sie „flex-direction: Column“ für das übergeordnete Element.
Das obige ist der detaillierte Inhalt vonWie zentriere ich Inhalte in einer Bootstrap-Spalte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!