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">&lt;div class=&quot;row&quot;&gt;
   &lt;div class=&quot;col-xs-1 center-block&quot;&gt;
       &lt;span&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/span&gt;
   &lt;/div&gt;
&lt;/div&gt;</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">&lt;div class=&quot;col-xs-1&quot; align=&quot;center&quot;&gt;</code>

Bootstrap 3 und 4:

Verwenden Sie die Klasse „text-center“:

<code class="html">&lt;div class=&quot;col-xs-1 text-center&quot;&gt;</code>

Bootstrap 4:

Verwenden Flex-Klassen:

<code class="html">&lt;div class=&quot;d-flex justify-content-center&quot;&gt;
   &lt;div&gt;some content&lt;/div&gt;
&lt;/div&gt;</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!