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

Adakah Penjajaran Menegak Berfungsi pada Elemen Blok Sebaris?

Susan Sarandon
Lepaskan: 2024-11-10 20:41:03
asal
741 orang telah melayarinya

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

HTML:

<div>
Salin selepas log masuk

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