Wie zentriere ich Inhalte in Bootstrap-Spalten richtig?

Inhalt in Bootstrap-Spalten ausrichten

Bei der Arbeit mit Bootstrap-Spalten kann das Ausrichten des Inhalts darin manchmal eine Herausforderung darstellen. Eine häufige Anforderung besteht darin, den Inhalt sowohl horizontal als auch vertikal zu zentrieren. In diesem Artikel wird erläutert, wie Sie dies mithilfe von Bootstrap-Klassen erreichen.

Im folgenden HTML scheint der Versuch, den Inhalt der Spalte mithilfe der Klasse „center-block“ zu zentrieren, nicht zu funktionieren.

<code class="html"><div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
</div></code>

Um dieses Problem zu beheben, verwenden Sie das Attribut „align“ anstelle der Klasse „center-block“.

<code class="html"><!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center"></code>

Zusätzlich bietet Bootstrap 3 die Klasse „text-center“ und Bootstrap 4 die Klasse „d-flex justify-content-center“ für eine prägnantere und modernere Ausrichtung.

<code class="html"><!-- recommended method -->
<div class="col-xs-1 text-center">

<!-- Bootstrap 4 -->
<div class="d-flex justify-content-center">
   <div>some content</div>
</div></code>

Beachten Sie, dass die Flex-Klassen von Bootstrap 4 Inhalte standardmäßig entlang der x-Achse zentrieren, es sei denn, „flex-direction " ist auf "Spalte" gesetzt.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Inhalte in Bootstrap-Spalten richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!