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.

//codepen.io/assets/embed/ei.js