Petua Pusat Teks Bootstrap

Terdapat empat cara untuk memusatkan teks dalam bootstrap: 1. Gunakan kelas utiliti penjajaran teks (.text-center); 2. Tetapkan atribut CSS Teks-Align ke "Pusat"; 3. Gunakan Flexbox (Justify-Content: Center; Align-Items: Center;); 4. Gunakan sistem grid bootstrap (.col-md-auto).

Petua Pusat Teks Bootstrap

Di bootstrap, terdapat beberapa cara untuk memusatkan teks:

1. Kelas utiliti penjajaran teks

Gunakan salah satu kelas utiliti berikut:

• .text-center : Pusat teks secara mendatar dalam bekas.
• .text-center-sm : Pusat teks pada skrin kecil secara mendatar.
• .text-center-lg : Pusat teks pada skrin pertengahan secara mendatar.
• .text-center-xl : Pusat teks pada skrin besar secara mendatar.

Contoh:

 <code class="html"><p class="text-center">居中文本</p></code>

2. CSS Properties

Anda boleh memusatkan teks dengan menetapkan harta CSS text-align ke "Pusat":

Contoh:

 <code class="css">p { text-align: center; }</code>

3. Flexbox

Menggunakan Flexbox juga merupakan cara yang berkesan untuk memusatkan teks:

Contoh:

 <code class="html"><div class="container"> <p style="justify-content: center; align-items: center;">居中文本</p> </div></code>

4. Sistem Grid Bootstrap

Untuk unsur-unsur dalam grid, anda boleh meletakkannya berturut-turut dan menggunakan kelas .col-md-auto untuk menyesuaikan lebarnya secara automatik, dengan itu mencapai pusat teks:

Contoh:

 <code class="html"><div class="row"> <div class="col-md-auto"> <p>居中文本</p> </div> </div></code>

Atas ialah kandungan terperinci Petua Pusat Teks Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!