Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memusatkan Kandungan dengan Betul dalam Lajur Bootstrap?

Bagaimana untuk Memusatkan Kandungan dengan Betul dalam Lajur Bootstrap?

DDD
Lepaskan: 2024-10-27 18:31:02
asal
975 orang telah melayarinya

How to Properly Center Content in Bootstrap Columns?

Menjajarkan Kandungan dalam Lajur Bootstrap

Apabila bekerja dengan lajur Bootstrap, menjajarkan kandungan di dalamnya kadangkala boleh menimbulkan cabaran. Satu keperluan biasa ialah memusatkan kandungan secara mendatar dan menegak. Artikel ini menerangkan cara untuk mencapai ini menggunakan kelas Bootstrap.

Dalam HTML berikut, percubaan untuk memusatkan kandungan lajur menggunakan kelas "center-block" nampaknya tidak berfungsi.

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

Untuk menyelesaikan masalah ini, gunakan atribut "align" dan bukannya kelas "center-block".

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

Selain itu, Bootstrap 3 menawarkan kelas "text-center" dan Bootstrap 4 menyediakan kelas "d-flex justify-content-center" untuk penjajaran yang lebih ringkas dan moden.

<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>
Salin selepas log masuk

Perhatikan bahawa kelas flex Bootstrap 4 akan memusatkan kandungan sepanjang paksi-x secara lalai, melainkan "arah-flex " ditetapkan kepada "lajur."

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

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan