CSS’de dikey ortalama
CSS kullanmaya yeni başlayanların ilk sorularından biri, dikey ortalamanın nasıl yapılacağıdır. Gerçekten de, yatay ortalama text-align: center; komutuyla kolayca halledilebilirken, dikey ortalama için böyle bir kolaylık bulunmaz.
Peki sayfaları CSS’de nasıl dikey ortalarız? Bunun bir çok yolu var. Ancak bunlardan bazıları, çapraz tarayıcı uyumlu değiller; yani her tarayıcıda doğru görüntülenemiyorlar.
Bu yazımızda, dikey ortalamaya yarayan 5 yöntemi inceleyeceğiz. Yöntemlerin kuvvetli ve zayıf yönleri de yazımızda yer alıyor. (Yazıda geçen yöntemleri “canlı canlı” inceleyebilmek için yazının orijinalinde yer alan örnek sayfayı şuradan görebilirsiniz.)
1. Yöntem
Bu metod, divlerin tablo şeklinde görünmesini sağlıyor. Böylece table’ın klasik vertical-align özelliğini kullanabiliyoruz:
<!-- CSS -->
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
<!-- DIVler -->
<div id="wrapper">
<div id="cell">
<div class="content">İçerik burada yer alıyor</div>
</div>
</div>
Olumlu yönleri:
- Content div’inin yüksekliği dinamik olarak değişebiliyor. Standart bir yükseklik tanımlamamız gerekmiyor.
- Wrapper div’inde yeterince boşluk olmasa da, content div’i kesilmiyor.
Olumsuz yönleri:
- Internet Explorer’da çalışmıyor (Fazla ümitlenmeyin IE 8 de sözümüze dahil).
- İç içe çok div kullanmak gerekiyor (Bu göreceli bir mahsuru).
2. Yöntem
Bu yöntem “top:50%” olarak tanımlanmış ve üst mesafesi (top-margin), içeriğin negatif %50’si olarak belirlenmiş bir div’den yararlanıyor. Yanisi şu: Yüksekliği CSS kodları içinde belirliyoruz.
Yüksekliği sabit olduğu için, content div’ine overflow:auto; şeklinde ekleme yapmayı düşünebilirsiniz. Böylece içeriye sığması gereken şeyler yükseklikten fazlaysa; içerik div’in dışında devam etmeyecek, bir scroolbar çıkacaktır.
<!-- CSS -->
#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* eksi yüksekliğin yarısı */}
<!-- DIV -->
<div id="content">
İçerik burada yer alıyor
</div>
Olumlu yönleri:
- Bütün tarayıcılarda çalışıyor.
- İç içe geçmiş divler kullanmak gerekmiyor.
Olumsuz yönleri:
- Yeterince boşluk olmadığında içerik kayboluyor (Mesela div, body’nin içindeyse ve kullanıcı tarayıcı penceresini yeterince küçültürse, scroolbar çıkmıyor).
3. Yöntem
Bu yöntemde, content div’inin yukarısına bir div yerleştiriyoruz. Yüksekliği “50%;” ve alt mesafeyi (margin-bottom) içerik yüksekliğinin negatifi olarak belirliyoruz.
<!-- CSS -->
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}
<!-- DIV -->
<div id="floater">
<div id="content">
İçerik burada yer alıyor
</div>
</div>
Olumlu yönleri:
- Bütün tarayıcılarda çalışıyor.
- Yeterince boşluk olmadığında bile içerik kaybolmuyor, scroolbar çıkıyor.
Olumsuz yönleri:
- İç içe çok div kullanmak gerekiyor (Göreceli).
4. Yöntem
Bu yöntem “position:absolute;” ile pozisyonlanmış, sabit yüksekliğe ve sabit genişliğe sahip bir div’den yararlanıyor. Daha sonra div, “top:0; bottom:0;”a geriliyor. Sabit bir yükseklik verdiğimiz için yüksekliği değişmiyor ve böylece margin:auto; ile ortalanabiliyor. Bu tarz, block elemanlarını yatay olarak ortalamak için margin:0 auto; kullanılmaya benziyor.
<!-- CSS -->
#content {position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;}
<!-- DIV -->
<div id="content">
İçerik buraya gelecek
</div>
Olumlu yönleri:
- Uygulaması kolay.
Olumsuz yönleri:
- Internet Explorer’da çalışmıyor (Evet IE 8’de de).
- Yeterince boşluk olmadığında, scroolbar çıkmıyor ve içerik kesiliyor.
5. Yöntem
Bu yöntem ile, yalnızca tek satırlık yazılar ortalanabiliyor. Satır yüksekliği (line-height), div’in yüksekliğine eşitleniyor ve yazı ortalanmış oluyor.
<!-- CSS -->
#content {height:100px; line-height:100px;}
<!-- DIV -->
<div id="content">
İçerik buraya gelecek
</div>
Olumlu yönleri:
- Bütün tarayıcılarda çalışıyor.
- Yeterince boşluk olmasa da, içerik kesilmiyor.
Olumsuz yönleri:
- Yalnızca text (yazı) için işe yarıyor. Block elemanlarında kullanılamıyor.
- Yazı bir satırdan uzun olduğunda, ortalık karışıyor.
Bu yöntem, sayfadaki küçük elemanlar için (Butonların üzerine yazılacak başlıklar vs.) oldukça kullanışlı.
Evet hepsi bu kadar. Hangi yöntemi tercih edersiniz?
cok tesekkurler
Gene de bir yükseklik belirtmek gerekiyor. Tablodaki gibi rahat değil