CSS - marjinauto; - Nasıl çalışır

kullanma margin: auto Bir blok elemanını yatay olarak ortalamak iyi bilinen bir tekniktir. Ama neden ya da nasıl çalıştığını hiç merak ettiniz mi? Bunu cevaplamak için, öncelikle marjın: auto'nin nasıl çalıştığına bir göz atmamız gerekiyor. Ayrıca karışımın içinde ne var Oto dikey merkezleme için çalışıyorsa, ve birkaç diğer husus için marjlarda olabilir.

Ama önce, nedir Oto aslında yapmak?

Tanımı Oto ile farklılık gösterir elementler, eleman tipleri ve bağlam. Marjlarda, Oto iki şeyden biri anlamına gelebilir: kullanılabilir alanı veya 0 pikseli kaplayın. Bu iki irade bir eleman için farklı düzenler tanımlayabilir.

Kullanılabilir Alan Alarak "auto"

Marjın en yaygın kullanımı budur Oto sık sık karşılaşıyoruz. Atayarak Oto Bir elemanın sol ve sağ kenarlarına, elemanın kabındaki kullanılabilir yatay alanı eşit olarak alırlar - ve böylece eleman merkezlenir.

Ancak, bu yalnızca yatay kenar boşlukları için çalışacaktır ( niye ya sonra) ve ayrıca su ile çalışmaz ve satır içi öğeler ve kendi başına da Çalışamayız içinde kesin ve sabit konumlu elemanlar (ancak bu işlerin nasıl yapıldığını göreceğiz).

Boşluk Alarak Sahte Şamandıra

Dan beri Oto hem sağ hem de sol kenar boşluklarında eşit miktarda "kullanılabilir" alan kaplar, değer ne zaman olur Oto bunlardan sadece birine verilir?

Sol veya sağ kenar boşluğu ile Oto elemanın sağa veya sola temizlenmiş gibi görünmesini sağlayarak "kullanılabilir" alanın tümünü kaplar.

“Oto” 0 piksel için hesaplanan

Önceden belirtildiği üzere, Oto kayan, satır içi ve mutlak elemanlarda çalışmaz. Bütün bu elementler zaten var düzenlerine karar verildi, bu yüzden kullanmanın bir faydası yok Oto marjlar ve bunun gibi merkezlenmesini beklemek için.

Bu gibi bir şey kullanarak ilk amacı yenmek olacak şamandıra. bundan dolayı Oto bu elemanlarda 0px değerinde olacaktır.

Oto genişliğe sahip değilse, tipik bir blok eleman üzerinde de çalışmayacaktır. Size şimdiye kadar gösterdiğim tüm örneklerin genişlikleri var..

Değer genişliği Oto olacak 0px marjlar. Bir blok elemanının genişliği tipik olarak kapsayıcısını kaplar Oto veya 100% ve dolayısıyla bir marj Oto hesaplanacak 0px böyle bir durumda.

Değerle Düşey Sınırlara Ne Olur? Oto?

Oto hem üst hem de alt kenarlarda her zaman 0 piksel'e kadar hesaplanır (mutlak elemanlar hariç). W3C spec şöyle diyor:

“Eğer “margin-top” veya “kenar dipli” olduğu “Oto”, kullanılan değerleri 0 "

Neden, bu kadar uzak, bir gizem. Tipik dikey sayfa akışı nedeniyle olabilir, nerede sayfa boyutu yüksekliği bilge artırır. Bu nedenle, bir öğeyi kabında dikey olarak ortalamak, yatay olarak yapılmasından farklı olarak (çoğu durumda) sayfanın kendisine göre merkezlenmiş görünmesini sağlamaz..

Belki de aynı sebepten dolayı, tüm sayfanın yüksekliği boyunca dikey olarak ortalanabilecek mutlak öğeler için bir istisna eklemeye karar verdiler..

Ayrıca, marjin çöküşü etkisi (bitişik elementlerin çöküşü) nedeniyle de olabilir.” kenar boşlukları) dikey kenar boşlukları için başka bir istisnadır.

Bununla birlikte, ikincisi olası görünmüyor gibi görünüyor - çünkü marjlarını daraltmayan elementler - Float'lar ve taşma ondan başka gözle görülür, hala 0px dikey kenar boşlukları ata Oto.

Kesinlikle Konumlandırılmış Öğeleri Merkezleme

Kesinlikle konumlandırılmış öğeler için bir istisna olduğu için, biz”kullanacağım Oto dikey ve yatay olarak ortalamak için değer. Ama ondan önce, ne zaman yapacağımızı öğrenmemiz gerek. margin: auto aslında kesinlikle konumlanmış bir elementte istediğimiz gibi çalış.

Başka bir W3C spesifikasyonunun geldiği yer:

"Eğer üçünün de “ayrıldı”, “Genişlik”, ve “sağ” Hangi “Oto”: İlk önce herhangi birini ayarla “Oto” için değerler “margin-left” ve “margin-right” 0'a ... "

"Üçten hiçbiri değilse “Oto”: İkisi de olursa “margin-left” ve “margin-right” Hangi “Oto”, denklemi iki sınırın eşit değerler elde ettiği ekstra kısıtlama altında çöz. "

Bu hemen hemen diyor ki yatay Oto marjlar eşit uzayları ele geçirmek, için değerler ayrıldı, Genişlik ve sağ olmamalı Oto , varsayılan değerleri. Tek yapmamız gereken, onlara kesinlikle konumlanmış bir elementte değer vermek.. ayrıldı ve sağ sahip olmalı Mükemmel merkezleme için eşit değerler.

Spec ayrıca dikey kenar boşlukları için benzer bir şeyden bahseder..

“Üçünün de “üst”, “yükseklik”, ve “alt” otomatik, ayarlandı “üst” statik pozisyona… ”

“Eğer üçü hiçbiri değilse “Oto”: İkisi de olursa “margin-top” ve “kenar dipli” Hangi “Oto”, denklemi iki sınırın eşit değerler elde ettiği ekstra kısıtlama altında çöz… ”

Dolayısıyla, mutlak bir elemanın dikey olarak ortalanmış, onun üst, yükseklik, ve alt değerler olmamalı Oto.

Şimdi tüm bunları birleştirerek, biz buyuz.”alacağım:

Sonuç

Sayfanızdaki bir öğeyi sağa veya sola, aşağıdaki öğeleri sararmadan (floatta olanlarda olduğu gibi) yıkamak istiyorsanız, kullanma seçeneğinin olduğunu unutmayın. Oto marjlar için.

Bir öğeyi mutlak değere dönüştürmek, böylece dikey olarak ortalanabilir, bu iyi bir fikir olmayabilir. Flexbox ve CSS dönüşümü gibi olanlar için daha uygun olan başka seçenekler var..