Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Memusatkan Kandungan dalam Lajur Bootstrap?

Bagaimana untuk Memusatkan Kandungan dalam Lajur Bootstrap?

Patricia Arquette
Patricia Arquetteasal
2024-10-30 06:46:27464semak imbas

How to Center Content in a Bootstrap Column?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn