Bagaimanakah Saya Boleh Menetapkan Margin atau Padding CSS sebagai Peratusan Ketinggian Bekas Induk?

Menetapkan Margin atau Padding sebagai Peratusan Ketinggian Bekas Induk dalam CSS

Apabila menjajarkan elemen secara menegak menggunakan CSS, selalunya wajar untuk menetapkan padding atau margin sebagai peratusan ketinggian bekas induk. Walau bagaimanapun, menetapkan padding-top, sebagai contoh, menggunakan nilai peratusan mengira peratusan itu berdasarkan lebar bekas, menyebabkan penjajaran menegak terputus apabila lebar bekas berubah.

Untuk mengatasi had ini dan menjajarkan elemen secara menegak sebagai peratusan ketinggian bekas induk, pertimbangkan pendekatan berikut:

Daripada menetapkan pelapik atau jidar terus pada elemen anak, buat struktur bersarang dengan div dalam tambahan:

<div>
<p>Gayakan div dalam menggunakan atas atau bawah untuk pelapik menegak atau jidar, dan tetapkan kedudukannya kepada relatif atau mutlak untuk membolehkan peletakan yang tepat:</p>
<pre class="brush:php;toolbar:false">.inner-container {
  top: 50%; /* Vertical padding or margin equal to 50% of parent container height */
  position: relative;
}

Dengan menggunakan sifat atas atau bawah, anda boleh menetapkan pelapik menegak atau jidar sebagai peratusan ketinggian bekas, memastikan penjajaran kekal konsisten tanpa mengira lebar bekas.