Mengapa Penjajaran Menegak Tidak Berfungsi Seperti Yang Dijangkakan dengan Elemen Blok Sebaris?

Isu Penjajaran Menegak dengan Elemen Blok Sebaris

Penjajaran menegak biasanya dikaitkan dengan penggayaan elemen sebaris, blok sebaris, imej dan jadual elemen. Walau bagaimanapun, apabila digunakan pada elemen blok sebaris, penjajaran menegak selalunya gagal menghasilkan hasil yang diingini. Untuk memahami sebabnya, kita mesti mendalami mekanik penjajaran menegak.

Penjajaran menegak mempengaruhi kedudukan kandungan dalam kotak baris berkenaan dengan elemen induknya. Kotak garis merujuk kepada kawasan segi empat tepat yang merangkumi semua elemen peringkat sebaris pada satu baris. Dalam contoh kami:

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

#content {
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

Elemen blok sebaris '#content' mempunyai kedua-dua lebar dan tinggi, mencipta kotak barisnya sendiri. Penjajaran menegak berfungsi dalam kotak baris ini, menjajarkan elemen secara menegak di dalamnya, bukan dengan elemen induknya '#wrapper'.

Oleh itu, apabila penjajaran menegak digunakan pada elemen blok sebaris, ia menjajarkan elemen dengan menghormati kotak barisnya sendiri, mengakibatkan kekurangan penjajaran menegak dalam elemen induk.

Atas ialah kandungan terperinci Mengapa Penjajaran Menegak Tidak Berfungsi Seperti Yang Dijangkakan dengan Elemen Blok Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!