Pusat Menegak Bootstrap: Perbandingan pelbagai kaedah

Empat kaedah elemen berpusat secara menegak dalam bootstrap adalah: D-Flex dan Align-items-center, kedudukan dan atas, grid CSS, flex-box dan margin. Pendekatan terbaik bergantung kepada keadaan: D-Flex adalah mudah dan mudah digunakan, sesuai untuk kebanyakan kes; Kedudukan dan bahagian atas sesuai untuk elemen induk pada ketinggian tetap; Grid CSS menyediakan fleksibiliti susun atur maju; Flex-box dan margin menawarkan pilihan ringan tanpa pusat mendatar.

Pusat Menegak Bootstrap: Perbandingan pelbagai kaedah

Unsur -unsur berpusat menegak adalah keperluan umum dalam bootstrap, dan terdapat beberapa cara untuk dicapai:

Kaedah 1: D-Flex dan Align-Items-Center

• Gunakan d-flex untuk menetapkan elemen induk sebagai bekas elastik.
• Tambah kelas utiliti align-items-center ke elemen anak vertikal.

 <code class="html"><div class="d-flex align-items-center"> <div>垂直居中的内容</div> </div></code>

Kaedah 2: Kedudukan dan Atas

• Poskan elemen induk sebagai kedudukan relatif.
• Poskan elemen kanak -kanak dan tetapkan nilai top kepada separuh ketinggian elemen induk.

 <code class="html"><div style="position: relative; height: 100px;"> <div style="position: absolute; top: 50%; transform: translateY(-50%);">垂直居中的内容</div> </div></code>

Kaedah 3: Grid CSS

• Gunakan susun atur grid CSS untuk menentukan elemen induk sebagai bekas grid.
• Buat baris menggunakan grid-template-rows: auto dan pusat kandungan secara menegak melalui align-content: center .

 <code class="css">.grid-container { display: grid; grid-template-rows: auto; align-content: center; height: 100px; } .grid-item { grid-row: 1; }</code>

Kaedah 4: Flex-box dan margin

• Tetapkan elemen induk ke Flexbox.
• Tambah margin: auto ke elemen kanak -kanak untuk memusatkannya secara mendatar dan menegak.

 <code class="css">.container { display: flex; height: 100px; } .item { margin: auto; }</code>

Kaedah mana yang terbaik?

Pendekatan terbaik bergantung pada keadaan:

• Kaedah 1 (D-Flex) : Sesuai untuk kebanyakan kes, mudah dan mudah digunakan.
• Kaedah 2 (kedudukan dan atas) : Berkenaan hanya untuk elemen induk dengan ketinggian tetap.
• Kaedah 3 (CSS Grid) : Menyediakan lebih banyak fleksibiliti untuk susun atur lanjutan.
• Kaedah 4 (Flex-Box dan Margin) : Ini adalah pilihan ringan tanpa pusat mendatar.

Atas ialah kandungan terperinci Pusat Menegak Bootstrap: Perbandingan pelbagai kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!