Bagaimana untuk Memusatkan Kandungan dengan Betul dalam Lajur Bootstrap?

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>

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">
<p>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.</p>
<pre class="brush:php;toolbar:false"><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>
<p>Perhatikan bahawa kelas flex Bootstrap 4 akan memusatkan kandungan sepanjang paksi-x secara lalai, melainkan "arah-flex " ditetapkan kepada "lajur."</p>
</div></code>