Bagaimanakah Penjajaran Menegak Berfungsi dengan Harta `vertical-align`?

Penjajaran Menegak dengan Harta Penjajaran menegak

Dalam dunia reka bentuk web, penjajaran menegak memainkan peranan penting dalam meningkatkan estetika visual dan menyusun kandungan dengan berkesan. Sifat penjajaran menegak CSS menawarkan cara untuk meletakkan elemen sebaris secara menegak dalam elemen induk, membolehkan pembangun mencapai penjajaran yang tepat. Walau bagaimanapun, memahami kerumitannya boleh menjadi tugas yang membingungkan.

Menentukan Penjajaran Menegak

Untuk memahami mekanisme penjajaran menegak, kita mesti terlebih dahulu mengakui bahawa ia hanya terpakai kepada elemen sebaris. Elemen ini, seperti , , atau teks dalam elemen peringkat blok, menduduki satu baris dan tidak mempunyai ketinggian tersirat. Selain itu, menentukan ketinggian garisan untuk elemen yang tidak mempunyai unsur yang wujud adalah penting.

Sifat ketinggian unsur induk mesti mempunyai nilai statik untuk penjajaran menegak berkuat kuasa. Nilai auto atau peratusan tidak akan mencukupi. Selain itu, pelbagai penyemak imbas moden menghadapi kesukaran untuk memberikan penjajaran menegak dengan tepat pada elemen bukan sebaris.

Pemilihan Elemen untuk Penjajaran

Salah tanggapan biasa ialah penjajaran menegak digunakan pada elemen bekas, serupa dengan penjajaran teks. Walau bagaimanapun, ia harus diberikan kepada elemen yang memerlukan kedudukan menegak. Contohnya, jika kita ingin memusatkan

teg dalam

, sifat jajaran menegak hendaklah digunakan terus pada

.

Contoh Praktikal

Pertimbangkan HTML dan CSS berikut kod:

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">#outer {
  height: 200px;
  text-align: center;
}

#inner {
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}

#header {
  display: inline-block;
}

Secara intuitif, seseorang mungkin menjangkakan

elemen untuk dipusatkan secara menegak dalam

elemen. Walau bagaimanapun, ini tidak berlaku. Untuk memahami sebabnya, adalah penting untuk diingat bahawa penjajaran menegak berlaku berdasarkan baris demi baris dalam elemen induk. Oleh itu, jika kandungan

elemen melebihi satu baris,

tidak akan sejajar seperti yang dijangkakan.

Untuk menggambarkan konsep ini, kami boleh mengubah suai kod HTML:

<div>
<p>Seperti yang anda lihat, </p>
<h1 id="elemen-kini-dipusatkan-secara-menegak-dalam-elemen-induk-kerana-penjajaran-menegak-adalah-berdasarkan-ketinggian-garisan-teks"> elemen kini dipusatkan secara menegak dalam elemen induk, kerana penjajaran menegak adalah berdasarkan ketinggian garisan teks.</h1>
</div>