CSS - marginauto; - Bagaimana itu bekerja
Menggunakan margin: otomatis
memusatkan elemen blok secara horizontal adalah teknik yang terkenal. Tetapi pernahkah Anda bertanya-tanya mengapa atau bagaimana cara kerjanya? Untuk menjawab ini, pertama-tama kita perlu melihat bagaimana margin: otomatis bekerja. Juga dalam campuran adalah apa mobil
dapat dilakukan dalam margin, jika berfungsi untuk pemusatan vertikal, dan beberapa masalah lainnya.
Tapi pertama-tama, apa yang terjadi mobil
sebenarnya?
Definisi dari mobil
bervariasi dengan elemen, jenis elemen dan konteks. Dalam margin, mobil
dapat berarti satu dari dua hal: mengambil ruang yang tersedia atau 0 px. Keduanya akan mendefinisikan tata letak yang berbeda untuk suatu elemen.
"otomatis" Mengambil Ruang yang Tersedia
Ini adalah penggunaan margin yang paling umum mobil
kita sering bertemu. Dengan menugaskan mobil
ke margin kiri dan kanan elemen, mereka mengambil ruang horisontal yang tersedia dalam wadah elemen secara merata - dan dengan demikian elemen tersebut akan terpusat.
Namun, ini hanya akan berfungsi untuk margin horisontal (lebih pada Mengapa nanti), dan juga tidak akan bekerja dengan melayang dan elemen sebaris dan dengan sendirinya, itu juga tidak bisa bekerja di mutlak dan elemen posisi tetap (Namun kami akan melihat bagaimana membuat mereka bekerja).
Faux Float Dengan Mengambil Ruang Yang Tersedia
Sejak mobil
di kedua margin kanan dan kiri mengambil ruang "tersedia" sama, apa yang Anda pikirkan akan terjadi ketika nilai mobil
hanya diberikan kepada salah satu dari mereka?
Margin kiri atau kanan dengan mobil
akan mengambil semua ruang "tersedia" yang membuat elemen tampak seperti telah memerah ke kanan atau kiri.
“mobil” Dihitung hingga 0px
Seperti disebutkan sebelumnya, mobil
tidak akan berfungsi dalam elemen apung, inline, dan absolut. Semua elemen ini sudah ada memutuskan tata letak mereka, jadi tidak ada gunanya menggunakan mobil
untuk margin dan mengharapkannya terpusat begitu saja.
Itu akan mengalahkan tujuan awal menggunakan sesuatu seperti mengapung
. Karenanya mobil
akan memiliki nilai 0px pada elemen tersebut.
mobil
juga tidak akan bekerja pada elemen blok khas jika tidak memiliki lebar. Semua contoh yang saya tunjukkan sejauh ini memiliki lebar.
Nilai lebar mobil
akan memiliki 0px
margin. Lebar elemen blok biasanya menutupi kontenernya saat itu mobil
atau 100%
dan karenanya margin mobil
akan dihitung ke 0px
dalam kasus seperti itu.
Apa Yang Terjadi pada Margin Vertikal Dengan Nilai mobil
?
mobil
baik margin atas dan bawah selalu dihitung dengan 0px (kecuali untuk elemen absolut). W3C spec mengatakannya seperti ini:
“Jika “margin-top” atau “margin-bottom” aku s “mobil”, nilai yang digunakan adalah 0 "
Itu sebabnya, yah sejauh itu, sebuah misteri. Bisa jadi karena aliran halaman vertikal yang khas, di mana ukuran halaman bertambah tinggi. Jadi, memusatkan elemen secara vertikal di wadahnya tidak akan membuatnya tampak terpusat, relatif terhadap halaman itu sendiri, tidak seperti ketika itu dilakukan secara horizontal (dalam kebanyakan kasus).
Dan mungkin itu karena alasan yang sama, mereka memutuskan untuk menambahkan pengecualian untuk elemen absolut yang dapat dipusatkan secara vertikal di sepanjang ketinggian seluruh halaman.
Bisa juga karena efek keruntuhan margin (keruntuhan elemen yang berdekatan” margin) yang merupakan pengecualian lain untuk margin vertikal.
Namun, yang terakhir tampaknya menjadi kasus yang tidak mungkin - karena elemen yang tidak merusak margin mereka - seperti Mengapung, dan elemen dengan meluap
Selain daripada terlihat
, masih menetapkan 0px margin vertikal untuk mobil
.
Memusatkan Elemen-elemen yang Diposisikan Sepenuhnya
Karena kebetulan ada pengecualian untuk elemen yang benar-benar diposisikan, kami”akan digunakan mobil
nilai untuk memusatkan satu secara vertikal dan horizontal. Tapi sebelum itu, kita perlu mencari tahu kapan margin: otomatis
sebenarnya berfungsi seperti yang kita inginkan dalam elemen yang benar-benar diposisikan.
Di sinilah spesifikasi W3C lain masuk:
"Jika ketiganya “kiri”, “lebar”, dan “kanan” adalah “mobil”: Pertama atur apa saja “mobil” nilai untuk “margin-kiri” dan “margin kanan” ke 0 ... "
"Jika tidak ada dari ketiganya “mobil”: Jika keduanya “margin-kiri” dan “margin kanan” adalah “mobil”, pecahkan persamaan di bawah batasan ekstra bahwa kedua margin mendapatkan nilai yang sama "
Cukup banyak yang mengatakan itu untuk horisontal mobil
margin untuk merebut ruang yang sama, nilai untuk kiri
, lebar
dan kanan
seharusnya tidak mobil
, nilai default mereka. Jadi yang harus kita lakukan adalah memberi mereka nilai dalam elemen yang benar-benar diposisikan. kiri
dan kanan
harus punya nilai yang sama untuk pemusatan sempurna.
Spesifikasi ini juga menyebutkan sesuatu yang mirip dengan margin vertikal.
“Jika ketiganya “teratas”, “tinggi”, dan “bawah” otomatis, diatur “teratas” ke posisi statis ... ”
“Jika tidak satupun dari ketiganya “mobil”: Jika keduanya “margin-top” dan “margin-bottom” adalah “mobil”, pecahkan persamaan di bawah batasan ekstra bahwa kedua margin mendapatkan nilai yang sama ... ”
Karenanya, untuk menjadi elemen absolut berpusat secara vertikal, -nya teratas
, tinggi
, dan bawah
nilai seharusnya tidak mobil
.
Sekarang dengan menggabungkan semua ini, inilah yang kita”saya akan mendapatkan:
Kesimpulan
Jika Anda ingin menyiram elemen pada halaman Anda ke kanan atau kiri tanpa membungkus elemen-elemen berikut (seperti apa yang terjadi dengan float), ingatlah ada opsi untuk menggunakan mobil
untuk margin.
Mengubah elemen menjadi absolut hanya agar dapat dipusatkan secara vertikal mungkin bukan ide yang bagus. Ada opsi lain seperti flexbox dan transformasi CSS yang lebih cocok untuk mereka.