Rumah >hujung hadapan web >tutorial css >Adakah Penjajaran Menegak Berfungsi pada Elemen Blok Sebaris?

Adakah Penjajaran Menegak Berfungsi pada Elemen Blok Sebaris?

Susan Sarandon
Susan Sarandonasal
2024-11-10 20:41:03721semak imbas

Does Vertical Align Work on Inline-Block Elements?

Penjajaran Menegak: Konsep Cacat untuk Blok Sebaris

Walaupun lazimnya didakwa bahawa penjajaran menegak digunakan dengan mudah pada elemen blok sebaris dan sebaris , kepercayaan ini sering disambut dengan kekecewaan. Pada hakikatnya, penjajaran menegak mempunyai tujuan khusus yang menjadikannya tidak berkesan untuk elemen blok sebaris.

Berbeza dengan penjajaran teks, yang menetapkan penjajaran mendatar teks dalam elemen lampirannya, penjajaran menegak menyasarkan penjajaran menegak elemen berkenaan dengan kotak garisan lampiran mereka, bukan elemen induknya. Kotak garis merujuk kepada ruang segi empat tepat yang diduduki oleh baris teks.

Pertimbangkan contoh berikut:

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

HTML:

<div>

Dalam kes ini, menggunakan penjajaran menegak: tengah kepada elemen blok sebaris #kandungan tidak akan memberi kesan kerana penjajaran menegak tidak mengambil kira jarak menegak dalam blok yang mengandungi. Ia hanya menjajarkan elemen dalam kotak barisnya sendiri.

Memahami sifat asas penjajaran menegak ini akan mengelakkan sakit kepala pada masa hadapan dan memastikan kedudukan menegak yang tepat dalam kod HTML dan CSS anda.

Atas ialah kandungan terperinci Adakah Penjajaran Menegak Berfungsi pada Elemen Blok Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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