Sayfaya Ortalı Blok Element

Yüksekliği genel sayfa yüksekliğinden az olan tasarımlarda içerik alanının sayfaya hem yatay hem de dikey olarak ortalı olması istenir ya da en azından öyle daha güzel görünür. İçeriğin üste yapışık olması hez zaman istenen birşey değildir. Üstten boşluk vererek kısmi olarak bu sorun giderilebilir. Ama nihai çözüm bir blok elementi sayfaya dikey olarak ortalamatan geçer. Özellikle “Yapım Aşamasında” sayfalarında bu pek de güzel işimize yarar.

Yatay olarak ortalamayı margin {0 auto;} özelliğiyle kolayca yapabilirken dikey olarak ortalamak bu kadar basit değildir.

Tabi bunun için de kullanılan birçok yöntem var. Bu da o yöntemlerden sadece biri.

Bir yazıyı dikey olarak ortalamak istersek line-height (satır yüksekliği) özelliğini blok elementimizin yüksekliğine eşitleyerek sağlayabiliriz. Ama buradaki sorun şu: Tahmin edeceğiniz üzere sadece tek satır olmak zorunda. İkinci satırda bir o kadar yükseklik daha aşağıya atar. Ancak yazı bir inline elementtir. div gibi blok elementte bu özellik yemez.

Hadi artık nihai çözümü anlatayım.

Aşamalar şunlar:

  1. Varsayılan kenar boşluk değerini (margin) sıfırlayın.
  2. html ve body‘ye 100% yükseklik verin ki o yüksekliğe göre kendisini ortalayacak evlat.
  3. Ortalayacağımız blok elemente sabit bir yükseklik verin.
  4. Blok elemente position:relative özelliği ve top:50% ile üstten boşluk verin.
  5. Dengelemek için blok elementin yüksekliğinin yarısı kadar ters margin-top verin.

Sayfaya Ortalı Blok Element

CSS Kodu:

* {
  margin:0; /*Varsayılan değerleri sıfırlamamız gerekiyor.*/
}
html, body {
  height:100%;
  overflow:auto; /*IE7 ve altı sürümlerde kaydırma çubuğunun çıkmasını engellemek için*/
}
.blok {
  position:relative;
  top:50%;
  width:400px;
  height:300px;
  margin:-150px auto 0; /*Üstten verilen boşluğu dengelemek için yüksekliğin yarısını ters yöne veriyor*/
}

Eğer bunun içine de ortalı bir blok element koymak istersek onu da şu şekilde yaparız.

.icBlok {
  position:absolute;
  top:50%;
  left:50%;
  width:300px;
  height:200px;
  margin:-100px 0 0 -150px; /*Bu sefer yatay ortalamak için de genişliğin yarısının tersini vermeliyiz*/
}

position:absolute olduğu için margin:0 auto; çalışmaz. Bunun için soldan veya sağdan 50% verip bunu da genişliğin yarısının tersi kadar margin vererek dengelemeliyiz.

IE6 ve üzeri, FF3.6, Chrome 5, Safari 5, Opera 10.6’da denendi ve çalışıyor.

Örnek

  • Sanem Taşçı

    Az bi hareketle güzel bir aksiyon olmuş. Teşekkürler yazı için…

  • İldeniz Kırlangıç

    Teşekkürler makale için. Ama örnekleri hep sabit yükseklikle vermişsin. Peki ya içerik alanı uzarsa ne olacak?

    • Güzel bir yerden yakalamışsın. Sorunun cevabı çok basit: Zaten uzayıp kısalan bir içerikte dikey olarak ortalamaya ihtiyaç duyulmaz. İçerik alanı uzadığında kaydırma çubuğu ortaya çıkar. Böyle tasarımlarda dikey ortalamak yerine üstten alttan boşluk vermek daha akıllıca olur.

  • Peki içeriği ortalamak için padding’den başka ne yazmalıyız ? İçerikteki yazı bende üste ve sola yapışık oldu.

    Ayrıca top ve left özelliklerine yazdığımız değerler blok için geçerli boşluklar değil miydi ? Margin’i yazmazsak niye gövde’ye göre boşluk hesaplanıyor acaba ?

    • Eğer tek satır bir içerikse yükseklik değeri kadar “line-height” değeri verebilirsin. Yani bloğun yüksekliği 50px ise line-height’de 50px olmalı.

      İçerik tek satırdan fazlaysa onu saran bloğun yüksekliği alınıp onun yarısı kadar üstten ve soldan (ya da sağdan) (-) eksi margin verilmeli. Ayrıca top ve left değerleriyle bu dengelenmeli. Yukarıdaki örnekteki gibi.

      Top ve left değerleri bloğun onu saran bloğa göre pozisyonunu belirler. Yukarıdaki yüzdelik değerler de bu işe yarar. Örnekte blok onu saran bloğun genişliğinin yarısı kadar soldan itildi, onu saran bloğun yüksekliğinin yarısı kadar da yukarıdan itildi. Ve bunu dengelemek için de yine kendi genişliğinin yarısı kadar marginle sola çekildi, kendi yüksekliğinin yarısı kadar da yukarı çekildi.

      Eğer margin değerini yazmasaydık bu dengeleme gerçekleşmezdi.