Bagaimana untuk Memusatkan Elemen Kanak-kanak Secara Menegak Di Dalam Div?

Elemen Pusat Menegak Dalam <div> Elemen

Apabila menjajarkan elemen dalam halaman web, memahami perbezaan antara menjajarkan elemen berbanding tetingkap atau relatif kepada bekas induknya adalah penting. Semasa menggunakan kiri: 50%; memusatkan elemen dalam keseluruhan tetingkap, menjajarkan elemen dalam induk langsungnya <div> memerlukan pendekatan yang berbeza.

Untuk mencapai pemusatan menegak dalam <div>, ikut langkah berikut:

1. Tambah text-align:center; kepada ibu bapa <div>. Ini memastikan bahawa semua elemen anaknya dijajarkan secara mendatar ke tengah.
2. Untuk elemen anak dipusatkan secara menegak, gunakan margin:auto;. Ini mengarahkan penyemak imbas untuk melaraskan margin atas dan bawah elemen secara automatik untuk mengagihkan ruang yang tinggal secara sama rata.

Contoh kod HTML dan CSS yang menunjukkan perkara ini:

<div>

#parent {
  text-align: center;
}

#child {
  margin: auto;
}

Dalam contoh ini, elemen anak dipusatkan secara mendatar dan menegak dalam induk <div>.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Elemen Kanak-kanak Secara Menegak Di Dalam Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!