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

Bagaimana Saya Memusatkan Elemen dalam Twitter Bootstrap?

Mary-Kate Olsen
Lepaskan: 2024-12-06 13:05:13
asal
214 orang telah melayarinya

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!

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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan