Bagaimana untuk Memusatkan Kandungan dalam Lajur Bootstrap?

Memusatkan Kandungan dalam Lajur Bootstrap

Anda mengalami kesukaran untuk memusatkan kandungan dalam lajur Bootstrap. HTML yang anda sediakan termasuk yang berikut:

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

Penyelesaian:

Isunya terletak pada penggunaan kelas "center-block". Kelas ini tidak lagi disokong dalam versi semasa Bootstrap. Sebaliknya, anda harus menggunakan salah satu kaedah berikut:

Sebelum Bootstrap 3:

Gunakan atribut "align":

<code class="html"><div class="col-xs-1" align="center"></code>

Bootstrap 3 dan 4:

Gunakan kelas "text-center":

<code class="html"><div class="col-xs-1 text-center"></code>

Bootstrap 4:

Gunakan kelas fleksibel:

<code class="html"><div class="d-flex justify-content-center">
   <div>some content</div>
</div></code>

Nota: Bootstrap 4 menjajarkan kandungan secara mendatar secara lalai. Untuk penjajaran menegak, gunakan "flex-direction: column" pada elemen induk.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Kandungan dalam Lajur Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!