Rumah >hujung hadapan web >tutorial css >Bagaimana Saya Memusatkan Elemen dalam Twitter Bootstrap?

Bagaimana Saya Memusatkan Elemen dalam Twitter Bootstrap?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-06 13:05:13158semak imbas

How Do I Center Elements in Twitter Bootstrap?

Memusatkan Elemen dalam Twitter Bootstrap

Apabila bekerja dengan Twitter Bootstrap, keperluan timbul untuk memusatkan elemen dalam bekas induknya. Berikut ialah kaedah yang boleh anda gunakan:

Pemusatan Mendatar:

1. Kelas pusat teks: Gunakan kelas pusat teks pada bekas induk untuk menjajarkan semua elemen anak secara mendatar.

2. Penggayaan Sebaris: Tetapkan penjajaran teks: sifat CSS tengah pada bekas induk atau elemen anak yang anda mahu tengahkan.

3. Offset (Kaedah Baharu): Diperkenalkan dalam Bootstrap 4, kelas mx-auto menambah jidar mendatar pada elemen, menyebabkan ia dipusatkan.

Pemusatan Menegak:

1. padding-top dan padding-bottom: Gunakan sifat padding-top dan padding-bottom pada bekas induk untuk menambah jarak menegak dan tengah elemen anak.

2. Kedudukan Mutlak: Letakkan elemen anak secara mutlak dan set atas: 50%; dan ubah: terjemah(-50%, -50%).

Nota: Penyelesaian di atas boleh digunakan pada versi Bootstrap yang lebih lama. Untuk Bootstrap 4 dan ke atas, kelas mx-auto ialah pendekatan yang disyorkan untuk pemusatan mendatar.

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

Kenyataan:
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