Mengapa Jajaran Menegak Berfungsi Berbeza dengan Elemen Sebaris?

Patricia Arquette
Lepaskan: 2024-11-06 07:37:02
asal
1018 orang telah melayarinya

Why Does Vertical-Align Work Differently with Inline Elements?

Memahami Sifat Penjajaran Menegak

Penjajaran menegak dalam CSS menimbulkan cabaran apabila bekerja dengan elemen sebaris disebabkan syarat dan pengecualian tertentu.

Menerapkan Jajaran Menegak

Jajaran Menegak digunakan pada elemen sebaris dalam bekas sebaris atau blok yang mempunyai ketinggian tertentu. Menetapkan ketinggian kepada nilai statik (bukan auto atau %) adalah disyorkan.

Kedudukan dalam Elemen Sebaris

Dalam elemen sebaris, jajaran menegak melaraskan penjajaran teks atau kandungan elemen secara menegak. Ini berbeza daripada penjajaran teks, yang menjajarkan teks secara mendatar dalam elemen blok.

Contoh JSFiddle

Dalam JSFiddle yang disediakan, #header hendaklah dipusatkan secara menegak antara # luar dan #dalaman. Walau bagaimanapun, #header diletakkan di bahagian atas #inner. Ini kerana #inner ialah elemen sebaris, tetapi #header tidak.

Penjajaran Kotak Garisan

Juruskan elemen menegak berdasarkan kotak barisnya. Kotak ini dibuat berdasarkan baris teks atau kandungan individu. Oleh itu, jika terdapat berbilang garisan, penjajaran menegak akan dijajarkan pada kotak garisan masing-masing, mewujudkan hasil yang tidak dijangka di mana penjajaran elemen tidak konsisten merentas ketinggian bekas.

Pertimbangan Tambahan

Pertimbangkan untuk menambah ketinggian garis pada elemen yang biasanya tidak mempunyainya.
  • Jika anda ingin memusatkan elemen secara menegak dalam keseluruhan ketinggian bekas, anda mungkin perlu menggunakan alternatif kaedah seperti flexbox atau jadual.

Atas ialah kandungan terperinci Mengapa Jajaran Menegak Berfungsi Berbeza dengan Elemen 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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!