Yatay Şekilde Element Ortalamak: inline-block vs table

Daha çok menü içerisindeki elementleri ortalamak için kullandığım “inline-block” kullanımının bugün yeni bir versiyonunu öğrendim. Bu versiyonu ilk defa görüyorum fakat siz daha önce karşılaştınız mı bilmiyorum: “display:table

Yatay olarak bir elementi ortalamak için “margin:auto” ve genişlik değerini belirtmek bilinen bir teknik. Dinamik elementlerde ise sabit bir genişlik olmadığından bu hipotezimiz geçersiz oluyor. Geleneksel yöntemden bahsetmek gerekirse:

[code lang=”html”]
body {
text-align: center;
}
nav {
display: inline-block;
}
[/code]

Temel olarak yukarıdaki iki elemente css’i uygulayarak bunu çözebiliyoruz. Bu güzel bir çözüm olmakla birlikte tek dezavantajı, “text-align” olmasıdır. Kullanılan element içerisindeki tüm text elementleri otomatik olarak bu özelliği alıp, ortalanacaktır. İşte tam bu noktada yeni bi’ çözüm olan “display:table” kullanımı ile bu sorunu ortadan kaldırabiliyoruz:

[code lang=”html”]
nav{
display: table;
margin: auto
}
[/code]

Bununla birlikte:
+ İki elemente css ile değer atamak yerine, tek element ile bu işi hallediyoruz.
+ Yan etkisi de bulunmuyor.

Codepen üzerinde gözlemlemek için:

See the Pen Dynamic Element Horizontal Centering by Ibrahim Nergiz (@phyesix) on CodePen.