CSS - marginauto; - Bagaimana ia berfungsi

Menggunakan margin: auto untuk memusatkan elemen blok secara mendatar adalah teknik yang terkenal. Tetapi adakah anda pernah tertanya-tanya mengapa atau bagaimana ia berfungsi? Untuk menjawabnya, kita perlu melihat bagaimana margin: kerja auto. Juga dalam campuran adalah apa auto boleh dilakukan dengan margin, jika ia berfungsi untuk menegak menegak, dan beberapa isu lain.

Tetapi pertama, Apakah auto sebenarnya lakukan?

Takrifan auto berbeza dengan unsur-unsur, jenis elemen dan konteks. Dalam margin, auto boleh bermaksud salah satu daripada dua perkara: mengambil ruang yang ada atau 0 px. Kedua-duanya akan tentukan susun atur yang berlainan untuk elemen.

"auto" Mengambil Ruang Tersedia

Inilah margin penggunaan yang paling biasa auto kita sering berjumpa. Dengan memberi auto ke margin kiri dan kanan elemen, mereka mengambil ruang mendatar yang ada di dalam bekas elemen sama - dan oleh itu unsur menjadi berpusat.

Walau bagaimanapun, ini akan berfungsi untuk margin mendatar sahaja (lebih banyak pada kenapa kemudian), dan juga tidak akan berfungsi dengan terapung dan elemen dalam baris dan dengan sendirinya, ia juga tidak boleh berfungsi dalam mutlak dan elemen kedudukan tetap (kita akan lihat bagaimana membuat mereka bekerja).

Faux Float By Take Up Available Space

Sejak auto di kedua-dua margin kanan dan kiri mengambil ruang "tersedia" sama, apa yang anda fikir akan berlaku apabila nilai itu auto diberikan kepada hanya satu daripada mereka?

Lebar kiri atau kanan dengan auto akan mengambil semua ruang "tersedia" yang membuat elemen kelihatan seperti telah dibuang ke kanan atau ke kiri.

“auto” Dikira dengan 0px

Seperti yang dinyatakan sebelum ini, auto tidak akan berfungsi dalam unsur-unsur yang terapung, sebaris dan mutlak. Semua elemen ini sudah ada memutuskan susun atur mereka, jadi tidak ada gunanya menggunakan auto untuk margin dan mengharapkan ia menjadi berpusat sama seperti itu.

Itu akan mengalahkan tujuan awal menggunakan sesuatu seperti terapung. Oleh itu auto akan mempunyai nilai 0px dalam elemen tersebut.

auto juga tidak akan berfungsi pada elemen blok tipikal jika ia tidak mempunyai lebar. Semua contoh yang saya menunjukkan kepada anda setakat ini mempunyai lebar.

Lebar nilai auto pasti akan 0px margin. Lebar elemen blok biasanya meliputi bekasnya apabila ia berlaku auto atau 100% dan dengan itu margin auto akan dikira 0px dalam kes sedemikian.

Apa yang Berlaku kepada Margin Menegak Dengan Nilai auto?

auto di kedua-dua margin atas dan bawah sentiasa dihitung dengan 0px (kecuali unsur-unsur mutlak). W3C spec mengatakan ia seperti ini:

“Jika “margin-top” atau “margin-bottom” adalah “auto”, nilai yang digunakan adalah 0 "

Kenapa, baik yang setakat ini, misteri. Ia mungkin disebabkan oleh aliran halaman menegak biasa, di mana saiz halaman meningkatkan tinggi ketinggian. Oleh itu, memusatkan unsur secara menegak dalam bekasnya tidak akan menjadikannya kelihatan berpusat, berbanding dengan halaman itu sendiri, tidak seperti ketika ia dilakukan secara mendatar (dalam kebanyakan kes).

Dan mungkin kerana sebab yang sama, mereka memutuskan untuk menambah pengecualian untuk elemen mutlak yang boleh dipusatkan secara menegak di sepanjang ketinggian keseluruhan halaman.

Ia juga boleh disebabkan oleh kesan keruntuhan margin (kejatuhan elemen bersebelahan” margin) yang merupakan pengecualian lain untuk margin menegak.

Walau bagaimanapun, yang terakhir ini seolah-olah menjadi tidak mungkin - kerana unsur-unsur yang tidak meruntuhkan margin mereka - seperti Float, dan unsur-unsur dengan limpahan Selain itu boleh dilihat, masih menetapkan margin menegak 0px untuk auto.

Memusatkan Elemen Posisi Posisi

Oleh kerana itu berlaku pengecualian untuk elemen yang benar-benar diposisikan, kita”akan digunakan auto nilai untuk memusatkan satu secara menegak dan mendatar. Tetapi sebelum itu, kita perlu mengetahui bila akan margin: auto sebenarnya berfungsi seperti yang kita mahu dalam unsur yang benar-benar diposisikan.

Di sinilah spesifikasi W3C yang lain ada dalam:

"Jika ketiga-tiga “ditinggalkan”, “lebar”, dan “betul” adalah “auto”: Pertama tetapkan apa-apa “auto” nilai untuk “margin-left” dan “margin-right” ke 0 ... "

"Kalau tidak ada yang ketiga “auto”: Jika kedua-duanya “margin-left” dan “margin-right” adalah “auto”, menyelesaikan persamaan di bawah kekangan tambahan bahawa dua margin mendapat nilai yang sama "

Itu cukup banyak mengatakan bahawa untuk mendatar auto margin untuk merebut ruang yang sama, nilai untuk ditinggalkan, lebar dan betul tidak boleh auto , nilai lalai mereka. Jadi apa yang perlu kita lakukan adalah memberi mereka nilai dalam elemen yang benar-benar diposisikan. ditinggalkan dan betul sepatutnya nilai yang sama untuk sentuhan sempurna.

Spesifikasi itu juga menyebut sesuatu yang serupa untuk margin menegak.

“Jika ketiga-tiga “atas”, “ketinggian”, dan “bawah” adalah auto, tetapkan “atas” ke kedudukan statik ... ”

“Sekiranya tiada satu daripada tiga “auto”: Jika kedua-duanya “margin-top” dan “margin-bottom” adalah “auto”, menyelesaikan persamaan di bawah kekangan tambahan bahawa kedua margin mendapat nilai yang sama ... ”

Oleh itu, untuk elemen mutlak menjadi berpusat secara menegak, nya atas, ketinggian, dan bawah nilai tidak seharusnya auto.

Sekarang dengan menggabungkan semua ini, inilah yang kita”akan mendapat:

Kesimpulannya

Sekiranya anda ingin memadam elemen pada halaman anda ke kanan atau kiri tanpa unsur-unsur berikut membungkusnya (seperti apa yang berlaku dengan terapung), ingat ada pilihan untuk digunakan auto untuk margin.

Menukar satu elemen kepada mutlak supaya ia boleh berpusat secara menegak mungkin bukan idea yang bagus. Terdapat pilihan lain seperti flexbox dan transform CSS yang lebih sesuai untuk mereka.