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!