Mengapa Margin Auto Tidak Berfungsi dengan Kedudukan Mutlak dalam CSS?

Susan Sarandon
Lepaskan: 2024-10-30 20:28:30
asal
217 orang telah melayarinya

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!