CSS'de Dikey Ortalamak

Tablo kullanarak yaptığınız dikey hizalama olayı, söz konusu CSS olduğunda bir hayli zahmetlidir. Bu derste nasıl yapılacağına bakalım.

Tablo kullanarak yaptığınız dikey hizalama olayı, söz konusu CSS olduğunda bir hayli zahmetlidir. Böyle zamanlarda bazıları genelde tablo kullanabilir, fakat açıkçası ben CSS içinde tablo kullanmaktan pek hoşlanmıyorum. Bu sorun çok can sıkıcıdır, ama CSS'den vazgeçmek gerekmiyor bunun için. Ne yapmalı öyleyse?

İşte bu dersimizde CSS'de dikey hizalamayı nasıl yapabiliriz, onu ele almak istiyorum. Dersimizi takip ettikten sonra doğru bir şekilde dikey hizalama probleminizi halledebileceksiniz. Öyleyse başlayalım.

NOT: Örneklerdeki CSS kodlamayı görebilmek için tarayıcınızın Görünüm > Sayfa Kaynağını Göster yolunuz izleyin.

1. TEK SATIRLIK ÇİZGİDE ORTAYA (MIDDLE) HİZALAMA

Tek satırlık çizgide ortaya hizalama çok kolaydır. Yazınızı dörtgen şeklinde bir grafiğin içine eklediğiniz zaman nasıl olacak, onu ayarlamasını belirtelim önce. Yazınızı yazdığınız zaman en üste tutunduğunu görürsünüz, üst çizgiye yapışır adeta. Bu da pek hoş durmaz. Dikey olarak hizalamak için yazınız için bir line-height belirtmelisiniz, ki bu da dış çerçeve grafiği ile aynı değerde olmalıdır.

p {
    margin: 0;
    padding: 0;
}

#dikdortgen {
    width: 530px;
    height: 25px;
    background: url(arkaplan.gif) no-repeat left top;
    padding: 0px 10px;
}

#dikdortgen p {
    line-height: 25px;
}

Örneği görmek için tıklayınız.

Bu örnek tek bir satır içindi. Ama söz konusu çoklu satırlar olunca durum değişiyor.

2. ÇOK SATIRLI ÇİZGİDE ALTA (BOTTOM) HİZALAMA

Relative pozisyonlandırılmış bir div içine absolute pozisyonlandırılmış bir div aslında istediğiniz bir parent div içine yerleştirilebilir. Öyleyse bu ayarı kullanalım ve relative pozisyonlandırılmış bir div içine bottom: 0 ayarı ile absolute pozisyonunda bir div yerleştirelim. Relative pozisyonlandırılmış bir div parent'indeki height ayarını aynen alacaktır. Biraz karışık olduğunun farkındayım, çünkü bu şekilde ifade etmek zorundayım, ama örneği incelerseniz daha iyi anlayabileceksiniz. CSS kodları görmek için örneğe bakabilirsiniz.

Örneği görmek için tıklayınız.

3. ÇOK SATIRLI ÇİZGİDE ORTAYA (MIDDLE) HİZALAMA

CSS'de dikey hizalamanın farklı bir yolu var. Eğer yukarıda ikinci olarak bahsettiğimiz alta hizalamadan yola çıkacak olursak absolute olarak belirlenmiş div için top: %50 veya bottom: %50 kullanabiliriz. Bu yazının üst kısmını (veya başlangıcını) ortaya hizalayacaktır. Ne var ki, bu gerçekten dikey hizalanmış olmaz. Biz de asıl dikey hizalama (vertical-align) özelliğini kullanabiliriz, ancak o da sadece hizalanmış elementlerde çalışıyor. Öyleyse çevrelenmiş div'ler için display:table ve display:table-cell kullanmamız gerekir.

Hepsi güzel ve kolay ama bir sorun var: Internet Explorer. IE display:table kısmını algılamıyor. Tabi ki bu durum bizi pes ettirmiyor. Biz bu ayarı kullanacağız ve son sürüm tüm tarayıcıların algılayabileceği bir neticeyi elde etmeyi başaracağız.

Şimdi, yazıyı dikey olarak hizalamada IE'yi nasıl kandırabiliriz? Ufak birkaç ayrıntı ile bu mümkün. IE relative ve absolute olarak pozisyonlandırılmış elementleri tanımada sorun yaşar. Daha fazla karışıklık olmaması için burada detaylara inmeyeceğim, bilmemiz gereken bu sorunun nasıl çözüleceğidir.

Çözüm şu: Relative bir div'i absolute bir div içine, bu absolute div'i de tekrar relative bir div içine yerleştirmek. Tuhaf mı buldunuz? Denemeye çalışalım ve bir parça izah edeyim: Dikey olarak hizalamak istediğimiz yazımızı yazdığımız Container isimli relative pozisyonlandırılmış bir div'imiz var. Bunu top:%50 olarak ayarlanmış ve absolute konumlandırılmış bir div içine yerleştireceğiz ve bunu da diğer bir relative olarak top:%-50 pozisyonlandırılmış bir div içine yerleştiriyoruz. Hah! Artık IE bile tanıyacak.

Öyleyse şimdi, iki çözümü toparlayalım ve her tarayıcıda çalışan bir sonuca ulaşmaya çalıştık, çünkü çalışmamız bütün modern tarayıcılarda sorunsuz çalışırken IE'deki bir eksiklikten dolayı bu tarayıcıda hata veriyordu, biz de IE için onun okuyabileceği bir kod ekledik. Anlattıklarımı aşağıdaki linkten örneği inceleyerek daha net anlayabilirsiniz.

Örneği görmek için tıklayınız.

Hepsi budur. Artık CSS tasarımla çalışmanın daha eğlenceli olduğu bir dönemdeyiz. Dikey hizalama konusunu da böylece halletmiş oldunuz. Hepinize kolay gelsin.

Yararlanılan Kaynaklar:

  • Luciano Slatineanu, Vertical Align in CSS
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Kodlari bir türlü çalıştıramadım 1 saattir ugraşıyorum ama olmadı sanırım kodlarda bir hata var
Kodlarda hata yok, o zaman örnekleri açın, farklı kaydedip uygulayın. Çünkü hata olsa örnekler çalışmazdı.
Süpersin abi.Aylardır kafayı yiyordum bu sorun yüzünden...:D
hocam eline sağlık bunu arıyordum ama benim aklımda bir css tasarım var sağ taraf % 20 sol % 20 orta üstte header altta body hepsini yapıyorum sağ sol dikey hizalama dışında

Yukarı Git