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

Patricia Arquette
Lepaskan: 2024-11-12 21:54:01
asal
601 orang telah melayarinya

Why Doesn't Vertical Alignment Work as Expected with Inline-Block Elements?

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;
}
Salin selepas log masuk

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!

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