CSS fit-content Değeri İle Yatay Ortalama
Bu yazımızda front-end işlemleri sırasında çokça karşımıza çıkan bir problemden bahsedeceğim: “CSS İle Yatay Ortalama”. Genellikle yatay ortalama işlemleri menü tasarımlarımızda ortaya çıkan bir durumdur.
İnternette bununla ilgili birçok araştırma yaptım ve bir şekilde sorunuma kalıcı çözümler buldum. Geçen günlerde yaptığım araştırmalar sonrasında farklı bir çözüm yolu da buldum ve bunu sizlerle paylaşmak istedim.
CSS’in width özelliğinin fit-content değerini kullanarak ortalama işlemlerimizi rahatlıkla yapabiliriz. Nesnelerimizin bulunacağı ana bloğun genişlik değerini ayarladıktan sonra ortalamak istediğimiz bloğa fit-content değerini veriyoruz ve otomatik olarak sağ ve sol boşlukları ayarlayarak ortalama işlemlerimizi gerçekleştiriyoruz.
Örnek Kod: Aşağıdaki kodlarda basit bir ortalama işlemi örneği verilmiştir.
HTML
[PHP]
[/PHP]
CSS
[PHP]
.ortala ul {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
[/PHP]
Tarayıcı desteği şuan için zayıf fakat ileride daha fazla kullanılacağı düşünülüyor.
W3C kataloglarında bulunan bir değerdir. Tahminimce kısa süre içerisinde değeri anlaşılacaktır :)
