Rumah >hujung hadapan web >tutorial css >Mengapakah 'atas: 50%' Tidak Memusatkan Elemen dengan Betul dalam Reka Letak Responsif?

Mengapakah 'atas: 50%' Tidak Memusatkan Elemen dengan Betul dalam Reka Letak Responsif?

Susan Sarandon
Susan Sarandonasal
2024-11-21 06:11:14662semak imbas

Why Does

Mengapa CSS "top: 50%" Tidak Berfungsi Seperti Yang Dijangkakan dalam Reka Letak Responsif?

Dalam reka bentuk web responsif, menggunakan peratusan untuk CSS sifat seperti "atas" adalah penting untuk mengekalkan kedudukan elemen merentas saiz skrin yang berbeza. Walau bagaimanapun, isu boleh timbul apabila "atas: 50%" tidak menjajarkan elemen dengan betul.

Pertimbangkan kod HTML dan CSS berikut:

<div>

Isu di sini ialah "atas" " harta untuk div anak merujuk ketinggian div induk, yang tidak ditentukan. Akibatnya, div kanak-kanak tidak akan diletakkan pada 50% dari bahagian atas port pandangan.

Untuk menyelesaikannya, anda mesti menentukan ketinggian khusus untuk div induk. Contohnya:

<div>

Kini, div anak akan diletakkan pada 50% dari bahagian atas div induk, yang mempunyai ketinggian yang ditentukan.

Sebagai alternatif, anda boleh meregangkan induk div untuk mengisi keseluruhan port pandangan dengan menetapkan sifat "atas," "bawah," "kiri" dan "kanan":

<div>

Dengan mentakrifkan dimensi div induk atau meregangkannya untuk mengisi port pandangan, anda memastikan bahawa peratusan seperti "atas: 50%" boleh menjajarkan elemen dengan betul dalam reka letak responsif.

Atas ialah kandungan terperinci Mengapakah 'atas: 50%' Tidak Memusatkan Elemen dengan Betul dalam Reka Letak Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn