Bagaimanakah anda memusatkan elemen dengan `kedudukan: mutlak` apabila `margin: auto` tidak mencukupi?

Apabila margin:auto Tidak Mencukupi untuk Memusatkan Elemen

Dalam elemen penentududukan, adalah penting untuk memahami perbezaan antara elemen tanpa dan dengan kedudukan :sifat mutlak.

Elemen Tanpa Kedudukan:mutlak

Untuk elemen aliran masuk (yang tiada kedudukan:mutlak), pemusatan hanya memerlukan margin:auto dan lebar yang ditentukan . Spesifikasi menyatakan bahawa: jika kedua-dua margin-kiri dan margin-kanan adalah automatik, ia akan mempunyai nilai yang sama, secara mendatar memusatkan elemen dalam bekasnya.

Elemen Dengan Kedudukan:mutlak

Walau bagaimanapun, untuk elemen dengan position:absolute, centering menggunakan margin:auto sahaja tidak mencukupi. Spesifikasi menyatakan bahawa syarat berikut mesti dipenuhi:

• kiri, lebar dan kanan mesti ditakrifkan semuanya.
• Jika ketiga-tiganya adalah auto, jidar-kiri dan jidar-kanan hendaklah ditetapkan kepada 0.
• Jika sama ada jidar-kiri atau jidar-kanan ialah auto, ia hendaklah ditetapkan kepada 0.

Untuk memusatkan elemen dengan kedudukan:mutlak, tetapkan kiri, kanan dan lebar serta benarkan jidar-kiri dan jidar-kanan dikira berdasarkan formula yang disediakan dalam spesifikasi.

Untuk menggambarkan:

• Kes 1 : position:relative dengan margin:auto - Ini akan memusatkan elemen secara mendatar dalam bekasnya.
• Kes 2: position:absolute dengan hanya margin:auto - Ini tidak akan berpusat unsur; kiri, kanan atau lebar mesti dinyatakan.
• Kes 3: kedudukan:mutlak dengan set kiri, kanan dan lebar - Ini akan memusatkan elemen secara mendatar dalam bekasnya.

Memahami perbezaan ini dan gelagat margin:auto dalam konteks kedudukan yang berbeza adalah penting untuk penentududukan elemen yang berkesan.

Atas ialah kandungan terperinci Bagaimanakah anda memusatkan elemen dengan `kedudukan: mutlak` apabila `margin: auto` tidak mencukupi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!