CSS Absolute Centering (Kesin Ortalama)

CSS ile bir içeriği ortalamak bir çoğumuz için bazen sorun olabiliyor. Bu konu için bir çok teknik mevcut. Yeni öğrendiğim bir teknik olan Absolute Centering’i size anlatmaya çalışacağım. Bir içeriği sayfa içinde ortalamak istediğimizde aşağıdaki css bize yeterli olacaktır.

#content { width: 500px; margin:0 auto; }

Söz konusu dikey olarakda ortalama yapmak olduğu zaman bu teknik malesef yetersiz kalıyor. Absolute Centering tekniğinde ise kolayca hem yatay hem dikey ortalama yapabilirsiniz.

Bilgi! Bu kullanım için yükseklik tanımı ve aşağıdaki adımlar yeterlidir.
#content {
    width: 500px;
    height: 500px;
    margin: auto;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

Demo: http://jsfiddle.net/GncArt/Pg9zr/

Bu tekniğin avantajlarını ise; Cross-browser olması (+IE8), minmal bir kod yapısında olması, resimler üzerindede aynı sonucu vermesi olarak sıralayabiliriz.

Alan İçinde Absolute Centering

Bir önceki örnekte içeriğimizi tüm tarayıcı içinde ortaladık. Eğer içeriği bir taşıyıcı alan içinde ortalamak isterseniz, sadece taşıyıcı alana

position: relative; 

yeterli olacaktır.

Aynı özellikleri kullanarak resimlerinizse ortalamak mümkün olacaktır.

  
  • Yorumunuz için teşekkür ederim.