Mengapakah `vertical-align: middle` Sentiasa Menempatkan Kandungan Sebaris Secara Menegak?

Akibat Tidak Dijangka Penjajaran menegak: Kandungan Tidak Sejajar

Dalam bidang reka bentuk web, penjajaran menegak memainkan peranan penting dalam elemen kedudukan menegak . Walau bagaimanapun, terdapat keadaan di mana penjajaran yang dimaksudkan gagal berlaku, yang membawa kepada salah penjajaran kandungan.

Pertimbangkan contoh berikut:

p {
  background: yellow
}

span {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  background: pink;
}

<p>Hello <span>What in the</span> World?</p>

Dalam senario ini, kami menjangkakan elemen span untuk dijajarkan secara menegak dalam perenggan sekelilingnya. Walau bagaimanapun, apabila menggunakan penjajaran menegak: tengah ke rentang, kami menemui hasil yang tidak dijangka: keseluruhan perenggan, tidak termasuk kandungan rentang, menjadi dijajar menegak.

Mengapa salah penjajaran ini berlaku? Ia bukan pepijat melainkan tingkah laku yang diharapkan bagi penjajaran menegak. Jajaran menegak menentukan penjajaran menegak elemen, dan dalam kes ini, rentang dipusatkan dalam perenggan. Ketiadaan penjajaran pada kandungan span menunjukkan bahawa penyemak imbas memaparkan kandungan mengikut ketinggian semula jadinya, iaitu kurang daripada ketinggian span itu sendiri.

Untuk mengalih keluar penjajaran, kami boleh melaraskan penjajaran menegak daripada kandungan span dengan mengubah suai penjajaran menegaknya:

span {
  position: relative;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

Atas ialah kandungan terperinci Mengapakah `vertical-align: middle` Sentiasa Menempatkan Kandungan Sebaris Secara Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!