Mengapa Padding Menegak Berasaskan Peratusan Gagal, dan Bagaimana Saya Boleh Menggunakan Ketinggian Peratusan untuk Penjajaran Menegak dalam CSS?

Cara Mengawal Padding dan Margin Menggunakan Peratusan Ketinggian Bekas Induk

Dalam CSS, mengawal penjajaran menegak boleh dicapai menggunakan padding-top harta benda. Walau bagaimanapun, menetapkan sifat ini sebagai peratusan lebar bekas induk dan bukannya ketinggian boleh menyebabkan tingkah laku yang tidak diingini.

Percubaan Asal:

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  padding-top: 50%;
  height: 50%;
}

Tidak dijangka Kelakuan:

Apabila menukar lebar .bekas asas, penjajaran menegak terputus, walaupun bahagian atas pelapik ditetapkan sebagai peratusan. Ini kerana pelapik menegak dan jidar dikira sebagai peratusan lebar bekas induk.

Penyelesaian:

Daripada menggunakan padding-top, gunakan sifat atas untuk mengawal penjajaran menegak. atas dikira sebagai peratusan ketinggian bekas induk.

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  position: absolute;
  top: 50%;
}

Struktur div bersarang ini meletakkan div kanak-kanak di dalam bekas induk dan menjajarkannya secara menegak:

<div class="base">
  <div class="vert-align">
    Content Here
  </div>
</div>

Dengan menggunakan bahagian atas bukannya padding-top, div anak diletakkan 50% ke bawah dari bahagian atas bekas induknya, tanpa mengira lebarnya. Ini memastikan penjajaran menegak walaupun apabila lebar induk berubah.

Atas ialah kandungan terperinci Mengapa Padding Menegak Berasaskan Peratusan Gagal, dan Bagaimana Saya Boleh Menggunakan Ketinggian Peratusan untuk Penjajaran Menegak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!