Bagaimana untuk Memusatkan Kandungan Dalam Lajur Bootstrap?

Memusatkan Kandungan dalam Lajur Bootstrap

Dalam Bootstrap, memusatkan kandungan dalam lajur boleh dicapai melalui pelbagai kaedah.

Satu pendekatan biasa ialah menggunakan atribut align="center" dalam div lajur. Contohnya:

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

Walau bagaimanapun, kaedah ini tidak disokong sepenuhnya oleh HTML5. Sebaliknya, Bootstrap 3 menyediakan kelas pusat teks khusus yang boleh digunakan pada lajur:

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

Untuk Bootstrap 4, kelas flex menawarkan penyelesaian yang lebih moden dan cekap untuk memusatkan kandungan:

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

Kaedah ini memusatkan kandungan di sepanjang paksi-x secara lalai, melainkan sifat arah-flex ditetapkan kepada lajur ke tengah di sepanjang paksi-y.

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