Bagaimana untuk memusatkan kandungan dalam lajur Bootstrap?

Question

Saya cuba memusatkan kandungan lajur. Nampak tak berkesan untuk saya. Ini HTML saya:

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

JSFiddle Demo

Answer 1

[Dikemas kini April 2022]: Diuji dan disertakan 5.1 versi Bootstrap.

---

Saya tahu soalan ini sudah lama. Dan soalan itu tidak menyebut versi Bootstrap yang dia gunakan. Jadi saya anggap jawapan kepada soalan ini sudah diselesaikan.

Jika mana-mana daripada anda (seperti saya) terjumpa soalan ini dan sedang mencari jawapan menggunakan rangka kerja bootstrap 5.0 (2020) dan 4.5 (2019) semasa, inilah penyelesaiannya.

Pemuat but 4.5, 5.0 dan 5.1

Gunakan d-flex justify-content-center pada div lajur. Ini akan memusatkan segala-galanya dalam lajur itu.

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        <!-- Image -->
    </div>
</div>

Jika anda ingin menjajarkan teks dalam lajur, hanya gunakan text-center

<div class="row">
    <div class="col-4 text-center">
        <!-- text only -->
    </div>
</div>

Jika anda mempunyai teks dan imej dalam lajur, anda perlu menggunakan d-flex justify-content-center dan d-flex justify-content-center 和 text-center .

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
       <!-- for image and text -->
    </div>
</div>

Answer 2

Penggunaan:

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

bukannya

<div class="col-xs-1 center-block">

Anda juga boleh menggunakan bootstrap 3 css:

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

Bootstrap 4 kini mempunyai kandungan kelas Flex ke tengah:

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

Sila ambil perhatian bahawa secara lalai ia akan menjadi x-axis，除非flex-direction是column