Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa Margin Auto Tidak Berfungsi dengan Kedudukan Mutlak dalam CSS?

Mengapa Margin Auto Tidak Berfungsi dengan Kedudukan Mutlak dalam CSS?

Susan Sarandon
Susan Sarandonasal
2024-10-30 20:28:30200semak imbas

Why Do Auto Margins Not Work with Absolute Positioning in CSS?

Konflik Kedudukan Mutlak CSS dengan Margin Auto

Dalam CSS, sifat kedudukan mutlak mengalih keluar elemen daripada aliran biasa dokumen dan ia diletakkan berdasarkan sifat atas, kiri, kanan dan bawah. Walau bagaimanapun, apabila sifat margin-kiri dan margin-kanan ditetapkan kepada auto dengan kedudukan mutlak, ia tidak mempunyai sebarang kesan.

Ini kerana margin-kiri: auto dan margin-kanan: sifat auto cuba memusatkan elemen dalam blok yang mengandunginya. Untuk elemen dengan kedudukan mutlak, blok yang mengandunginya ialah badan dokumen. Walau bagaimanapun, badan dokumen itu sendiri tidak mempunyai lebar yang ditetapkan, jadi penyemak imbas tidak dapat menentukan di mana elemen harus dipusatkan.

Sebaliknya, apabila sifat kedudukan ditetapkan kepada relatif, elemen itu dialih keluar daripada aliran biasa, tetapi kotak khayalannya kekal dalam aliran dokumen. Dalam kes ini, apabila jidar-kiri dan jidar-kanan ditetapkan kepada auto, jidar akan dikira berdasarkan lebar blok yang mengandungi, yang bagi elemen yang agak kedudukannya masih merupakan badan dokumen. Walau bagaimanapun, memandangkan badan dokumen mempunyai lebar yang ditetapkan, penyemak imbas boleh menentukan dengan betul di mana elemen harus dipusatkan.

Untuk memusatkan elemen dengan kedudukan mutlak:

Sebaliknya menggunakan margin-left: auto dan margin-right: auto, anda boleh menetapkan sifat kiri dan kanan kepada 50%. Ini akan memusatkan elemen dalam badan dokumen. Anda juga perlu menentukan sifat atas dan bawah untuk menghalang elemen daripada bergerak dari skrin.

Atas ialah kandungan terperinci Mengapa Margin Auto Tidak Berfungsi dengan Kedudukan Mutlak dalam CSS?. 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