mhusty
02-01-2012, 18:46
CSS kullanmaya yeni başlayanların ilk sorularından biri, dikey ortalamanın nasıl yapılacağıdır.Aytuğ abinin isteği üzerine kendi bilgilerim ve internetten aldığım bilgileri harmanlayarak bir şeyler hazırlamaya çalıştım.. 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ı, her tarayıcıyla uyumlu olamıyor; 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.
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 -->
#tasiyici {display:table;}
#kapsayici {display:table-cell; vertical-align:middle;}
<!-- DIV -->
<div id="tasiyici">
<div id="kapsayici">
<div class="icerik">
İçerik burada yer alıyor
</div>
</div>
</div>
Olumlu yönleri:
- İcerik div’inin yüksekliği dinamik olarak değişebiliyor. Standart bir yükseklik tanımlamamız gerekmiyor.
-Tasiyici div’inde yeterince boşluk olmasa da, icerik 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
<!-- CSS -->
#icerik {position:absolute; top:50%; height:240px; margin-top:-120px; /* eksi yüksekliğin yarısı */}
<!-- DIV -->
<div id="icerik">
İç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, icerik 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 -->
#yaslama {float:left; height:50%; margin-bottom:-120px;}
#icerik {clear:both; height:240px; position:relative;}
<!-- DIV -->
<div id="yaslama">
<div id="icerik">
İç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 -->
#icerik {position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;}
<!-- DIV -->
<div id="icerik">
İç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 -->
#icerik {height:100px; line-height:100px;}
<!-- DIV -->
<div id="icerik">
İç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ı.
Bir sürü Yöntem mevcuttur eğer bir yerde yanlışım var ise düzeltin ..
İyi Günler
Peki sayfaları CSS’de nasıl dikey ortalarız? Bunun bir çok yolu var. Ancak bunlardan bazıları, her tarayıcıyla uyumlu olamıyor; 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.
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 -->
#tasiyici {display:table;}
#kapsayici {display:table-cell; vertical-align:middle;}
<!-- DIV -->
<div id="tasiyici">
<div id="kapsayici">
<div class="icerik">
İçerik burada yer alıyor
</div>
</div>
</div>
Olumlu yönleri:
- İcerik div’inin yüksekliği dinamik olarak değişebiliyor. Standart bir yükseklik tanımlamamız gerekmiyor.
-Tasiyici div’inde yeterince boşluk olmasa da, icerik 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
<!-- CSS -->
#icerik {position:absolute; top:50%; height:240px; margin-top:-120px; /* eksi yüksekliğin yarısı */}
<!-- DIV -->
<div id="icerik">
İç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, icerik 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 -->
#yaslama {float:left; height:50%; margin-bottom:-120px;}
#icerik {clear:both; height:240px; position:relative;}
<!-- DIV -->
<div id="yaslama">
<div id="icerik">
İç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 -->
#icerik {position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;}
<!-- DIV -->
<div id="icerik">
İç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 -->
#icerik {height:100px; line-height:100px;}
<!-- DIV -->
<div id="icerik">
İç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ı.
Bir sürü Yöntem mevcuttur eğer bir yerde yanlışım var ise düzeltin ..
İyi Günler