Mengapakah "atas: 50%" Tidak Memusatkan Elemen Saya Secara Menegak Apabila "kiri: 50%" Berfungsi dengan Betul?

Peratusan teratas CSS Tidak Berkelakuan Seperti Dijangka: Menyelidiki Sebabnya

Dalam mengejar reka letak responsif, anda menghadapi anomali di mana "atas :50%" tidak berfungsi seperti yang dijangkakan, manakala "kiri:50%" berfungsi tanpa masalah. Mengapa ini berlaku?

Untuk memahami tingkah laku, pertimbangkan struktur elemen ibu bapa dan anak berikut:

<div>

Kunci untuk menyelesaikan masalah terletak pada pemahaman bagaimana sifat "atas" beroperasi dalam CSS. Apabila anda menentukan peratusan, seperti "50%", ia dikira secara relatif kepada ketinggian bekas induk. Walau bagaimanapun, dalam senario ini, bekas induk tidak mempunyai ketinggian eksplisit yang ditentukan, jadi sifat "atas" dikira dengan berkesan terhadap nilai yang tidak diketahui.

Untuk menangani perkara ini, anda perlu menetapkan ketinggian tetap untuk bekas induk . Ini akan menyediakan titik rujukan yang diperlukan untuk kedudukan teratas elemen kanak-kanak.

Contoh 1: Menentukan Ketinggian

<div>

Dengan memberikan ketinggian 200px kepada induk div, kedudukan teratas anak div kini dikira dengan betul sebagai 50% daripada 200px, menghasilkan jangkaan menegak berpusat.

Contoh 2: Meregangkan Bekas

Pendekatan alternatif melibatkan regangan bekas induk untuk menduduki keseluruhan ruang yang ada:

<div>

Dengan menentukan sifat atas, bawah, kiri dan kanan bekas, ia mengembang untuk memenuhi ruang yang tersedia. Kedudukan teratas div kanak-kanak kemudian dikira secara relatif kepada bekas yang diregangkan, mencapai kesan pemusatan yang sama.

Atas ialah kandungan terperinci Mengapakah "atas: 50%" Tidak Memusatkan Elemen Saya Secara Menegak Apabila "kiri: 50%" Berfungsi dengan Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!