Bagaimana untuk Memusatkan Elemen Secara Mendatar dan Menegak dalam Twitter Bootstrap?

Panduan Komprehensif untuk Memusatkan Elemen dalam Twitter Bootstrap

Apabila bekerja dengan Twitter Bootstrap, keperluan untuk memusatkan elemen secara menegak atau mendatar dalam bekas induk timbul dengan kerap. Rangka kerja serba boleh ini menyediakan pelbagai pendekatan untuk mencapai penjajaran ini.

Pemusatan Mendatar

1. Kelas pusat teks: Gunakan pusat teks kelaskan ke bekas induk untuk memusatkan kandungannya secara mendatar. Ini ialah kaedah yang mudah dan berkesan untuk kedua-dua elemen teks dan bukan teks.
2. Kelas mx-auto: Jika anda memerlukan lebih fleksibiliti dan ingin mengimbangi pemusatan, gunakan mx-auto kelas. Ia menambahkan jidar automatik ke kiri dan kanan elemen, menolaknya ke tengah.

Pemusatan Menegak

Bootstrap tidak menawarkan terbina dalam utiliti untuk pemusatan menegak. Walau bagaimanapun, terdapat dua teknik biasa:

1. Kelas Berpusat Penomboran: Untuk memusatkan secara menegak satu elemen dalam bekas dengan kawalan penomboran, gunakan kelas berpusat penomboran pada penomboran pembungkus kawalan.
2. CSS tersuai: Anda juga boleh menggunakan CSS tersuai untuk memusatkan secara menegak elemen. Contohnya, tetapkan margin atas: auto dan margin bawah: sifat auto pada elemen yang anda mahu tengahkan.

Nota:

Teks kelas -center dan penomboran berpusat telah ditamatkan dalam versi Bootstrap terkini. Adalah disyorkan untuk menggunakan utiliti mx-auto dan d-flex.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Elemen Secara Mendatar dan Menegak dalam Twitter Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!