Cara Menggunakan Kelas Penolong Bootstrap ke Pusat

Kandungan yang berpusat secara mendatar dan menegak dengan kelas penolong bootstrap: Panduan Komprehensif

Artikel ini menangani soalan -soalan umum tentang menggunakan kelas penolong bootstrap untuk kandungan yang berpusat, kedua -duanya secara mendatar dan menegak, di tengah -tengah center -centrent

bergantung kepada sama ada anda memerlukan mendatar, menegak, atau kedua -duanya. Untuk pusat mendatar, pendekatan yang paling mudah melibatkan menggunakan kelas

. Kelas ini pusat kandungan dalam talian (teks, imej, dan lain -lain) dalam bekas induknya. Walau bagaimanapun, ia hanya berfungsi untuk unsur -unsur atau unsur -unsur yang mempunyai harta paparan yang ditetapkan kepada

atau

. Sekiranya elemen anda adalah elemen peringkat blok (seperti .text-center), ia akan memusatkan kandungan inline-block inline di dalam elemen, tetapi elemen itu sendiri masih akan mengambil lebar penuh ibu bapanya. Sebagai contoh: <div> <em> </em> Kod ini akan memusatkan itu 50% daripada lebar bekas. Menggantikan <p> dengan lebar tetap (mis., <code>.mx-auto) akan memusatkan div lebar tertentu. Kelas

menyediakan bekas responsif, memastikan saiz yang sesuai di pelbagai saiz skrin. Tanpa menentukan lebar,

<div class="container">
  <div class="mx-auto" style="width: 50%;">
    This div is horizontally centered.
  </div>
</div>

sahaja tidak akan memusatkan elemen peringkat blok; Ia memerlukan lebar yang ditakrifkan untuk berfungsi dengan betul. Tidak ada satu kelas yang mencapai ini secara langsung. Pendekatan terbaik sering bergantung pada konteks. Ingatlah untuk menambah

dan <div> ke bekas induk untuk membolehkan tingkah laku flexbox: <code>50% 200px .container .mx-auto kelas memastikan bekas induk mengambil ketinggian yang tersedia penuh.

• Untuk unsur-unsur peringkat blok: Menggunakan Flexbox kekal sebagai kaedah yang paling berkesan. Contoh di atas boleh disesuaikan untuk unsur-unsur peringkat blok hanya dengan menggantikan dengan <span></span> atau elemen peringkat blok yang lain. Pusat <div> Bootstrap menawarkan beberapa kelas untuk berpusat mendatar, masing -masing dengan kes penggunaannya: <li> <strong> </strong> </li>: pusat kandungan dalam talian dalam ibu bapa. Terbaik untuk teks pendek atau unsur-unsur sebaris. <h3> </h3> <p> </p>: <ul> Pusat elemen peringkat blok secara mendatar dengan menetapkan margin kiri dan kanannya ke <li>. Memerlukan lebar yang ditetapkan untuk elemen berfungsi dengan betul. Pilihan yang lebih serba boleh untuk susun atur yang lebih kompleks. Reka bentuk: <strong> <code>.text-center
Ketergantungan konteks:
• keberkesanan beberapa kelas (seperti ) bergantung pada konteks (mis., Dimensi kontena induk, lebar elemen). Anda mungkin perlu menyesuaikan lebar atau menggunakan pertanyaan media untuk menyempurnakan tingkah laku yang berpusat di seluruh saiz skrin yang berbeza. Anda mungkin perlu menggabungkan kelas, menggunakan flexbox atau grid secara langsung, atau menulis CSS tersuai. Keterbatasan mereka dan menggunakannya bersempena dengan teknik susun atur lain seperti Flexbox adalah penting untuk mewujudkan laman web yang responsif dan berstruktur. .mx-auto