Rumah > hujung hadapan web > tutorial css > Bagaimanakah anda memusatkan elemen dengan `kedudukan: mutlak` apabila `margin: auto` tidak mencukupi?

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

Mary-Kate Olsen
Lepaskan: 2024-11-06 00:53:02
asal
600 orang telah melayarinya

How do you center elements with `position: absolute` when `margin: auto` isn't enough?

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!

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