Rumah >hujung hadapan web >tutorial css >Mengapa Jajaran Menegak Berfungsi Berbeza dengan Elemen Sebaris?

Mengapa Jajaran Menegak Berfungsi Berbeza dengan Elemen Sebaris?

Patricia Arquette
Patricia Arquetteasal
2024-11-06 07:37:021094semak imbas

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!

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