Rumah > hujung hadapan web > tutorial css > Apakah Syarat yang Perlu Dipenuhi untuk `margin: 0 auto;` untuk Memusatkan Elemen?

Apakah Syarat yang Perlu Dipenuhi untuk `margin: 0 auto;` untuk Memusatkan Elemen?

Barbara Streisand
Lepaskan: 2024-12-13 04:46:10
asal
170 orang telah melayarinya

What Conditions Must Be Met for `margin: 0 auto;` to Center an Element?

Apa Yang Tepat Diperlukan untuk "margin: 0 auto;" ke Berfungsi?

Dalam pembangunan web, "margin: 0 auto;" ialah sifat CSS popular yang digunakan untuk memusatkan elemen secara mendatar dalam bekas induknya. Walau bagaimanapun, untuk ia berfungsi dengan berkesan, kriteria khusus mesti dipenuhi oleh kedua-dua elemen kanak-kanak dan induknya.

Sifat CSS untuk Elemen Kanak-kanak:

  • Paparan Tahap Blok: Elemen mestilah elemen peringkat blok, seperti div, p atau jadual, kerana elemen sebaris akan tidak bertindak balas kepada jidar automatik.
  • Tiada Terapung: Elemen tidak sepatutnya mempunyai sebarang sifat terapung ditetapkan, kerana elemen terapung tidak menempati ruang dalam aliran dokumen.
  • Tiada Kedudukan Tetap atau Mutlak: Kedudukan elemen tidak seharusnya ditetapkan kepada tetap atau mutlak, kerana kedudukan ini mengambil keutamaan berbanding margin automatik.

Sifat CSS untuk Elemen Induk:

  • Lebar Tetap untuk Anak: Elemen anak mesti mempunyai lebar tetap, bukan ditetapkan kepada auto. Walaupun margin: 0 auto secara teknikal berfungsi dengan kanak-kanak lebar automatik, tetapan lebar auto mengatasi margin auto, menjadikannya tidak berkesan.

Adalah penting untuk ambil perhatian bahawa semua syarat ini mesti dipenuhi untuk "margin: 0 auto;" harta untuk memusatkan elemen kanak-kanak dengan betul. Selain itu, terdapat pengecualian kepada peraturan "tiada kedudukan tetap atau mutlak": jika elemen tetap atau kedudukan mutlak mempunyai "kiri: 0;" dan "kanan: 0;", ia akan tetap berada di tengah dengan jidar automatik.

Atas ialah kandungan terperinci Apakah Syarat yang Perlu Dipenuhi untuk `margin: 0 auto;` untuk Memusatkan Elemen?. 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