CSS ile Dikey Ortalama

Benimde çok fazla sıkıntısını çektiğim elementlerin dikey de ortalama işi için bir çok teori ve yöntem ileri sürülmektedir. Ben bunların en makbul olanını bulup uygulamak istedim ve bu makalede bunu sizlerle paylaşıyorum. Aslında bulunan çözümler beni tam olarak tatmin etmiyor desem yeridir. Aşağıda anlatılacak yöntem istediğimiz sonucu elde etmek için yeterli olacaktır.

CSS ile dikey oratalama ile ilgili farklı yöntemler vardır. Ayrıca bazı şartlara göre de kodlama önerileri vardır, biz burada bunlara değinmeden geçeceğiz. İlgilenenler makalenin sonunda verilen kaynaklar bölümündeki linkleri takip edip ilgili yöntemlere erişebilirler.

CSS ile dikeyde ortalama yapmak için vertical-align özelliği var ise de bu özellik HTML?deki tablo gibi çalışmaz. Yani istediğimiz sonuca bizi ulaştırmaz.

CSS vertical-align özelliği belirsiz yükseklikte(içeriği değişebilen) kutularda işe yaramaz.

IE için Keystone?un sunduğu çözüm; mutlak konumlandırma uygulanmış kapsayıcı elemente yüksekliğinin yarısı kadar top(veya margin-top) değeri uygulamaktır. Bu kapsayıcı elementin içindeki elementi dikeyde ortalayacaktır.

Mozilla, Opera, Safari gibi standart web tarayıcıları için çözüm çok farklıdır. Üstteki katmana display:table tanımı yapılır. İçteki elementlere de display:table-cell özelliği uygulanır. Ayrıca dikeyde ortalanmak istenen elemente vertical-align tanımı yaparak element dikeyde ortalanır. (Bu özelliği IE kavrayamamaktadır. Kavramamakta da ısrarlıdır. IE 7 display:table ve türevlerini desteklemiyor.)

İki çözüm vardır altçizgi(_) ve (#) ile yapılan bir çözüm vardır. IE(IE7 hariç) (_) ile tanımlanan kodu görmediği için yorumlamayacaktır. # ile başlayan kodları tüm IE versiyonları(IE7 dahil) görmeyecektir. Bu işaretlerin kullanım amacı tüm versiyonlarda aynı sonucu elde etmektir.

Aşağıdaki kod IE5+,FF, Opera 7, Konqueror 3.0.3 altında standart ve garip mod da çalışıyor.

01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

02
<html>

03
<head>

04
<title>CSS ile dikey  ortalama</title>

05
<style>

06
#Kapsul{

07
 display:  table;

08
 height: 400px;

09
 #position:  relative;

10
 overflow: hidden;

11
 border:  1px solid green;

12
}

13
#IcerikAlani{

14
 #position:  absolute;

15
 #top: 50%;

16
 display:  table-cell;

17
 vertical-align:  middle;

18
}

19
#alan{

20
 #position:  relative;

21
 #top: -50%;

22
 border:  1px solid green;

23
}

24
</style>

25
</head>

26
<body>

27
 <div id="Kapsul">

28
 <div id="IcerikAlani">

29
 <div id="alan">Lorem Ipsum is simply dummy text of the printing  and typesetting  industry. Lorem Ipsum has been the industry's standard  dummy text ever  since the 1500s, when an unknown printer took a galley  of type and  scrambled it to make a type specimen book. </div>

30
 </div>

31
 </div>

32
</body>

33
</html>

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

Kaynaklar

Kaynak : Fatih HAYRİOĞLU, CSS dersleri

Kaynaklar

Dersler