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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS ile dikey ortalama</title>
<style>
#Kapsul{
	display: table;
	height: 400px;
	#position: relative;
	overflow: hidden;
	border: 1px solid green;
}
#IcerikAlani{
	#position: absolute;
	#top: 50%;
	display: table-cell;
	vertical-align: middle;
}
#alan{
	#position: relative;
	#top: -50%;
	border: 1px solid green;
}
</style>
</head>
<body>
  <div id="Kapsul">
    <div id="IcerikAlani">
    <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>
    </div>
  </div>
</body>
</html>

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

Kaynaklar

36 Yorum (Yorum Ekle)

@zoom699 diyor ki:

Haziran 28, 2011, 16:50

hocam burdaki örneğinizi uyarladım bende siteme ie7 deki yaslanma sorununu çözmek için… sizin örneğiniz sol ve sağ kapsıyor fakat genişlik verince ie7 de beni istediğim gibi oluyor.
html, body, #kapsul{
height: 100%;
width: 820px;
margin:0 auto ;
min-height:100%;
display: table;
overflow: hidden;
}
#icerikAlani {
clear:left;
width: 820px;
margin:5px auto;
min-height: 0 auto;
display: table-cell; vertical-align: top;
}
benim after uygulamam etkiliyor olablirmi

Cevapla

fatihhayri diyor ki:

Haziran 29, 2011, 22:48

#icerikAlani değilde onun içindeki kısım ortalanacak yukarıdaki örnekte gibi

Cevapla

.... diyor ki:

Nisan 20, 2011, 18:24

css3 versiyonunu da yayımlarsanız seviniriz hem yatay hem dikey ;) teşekkürler….

Cevapla

fatihhayri diyor ki:

Mayıs 28, 2011, 00:13

yatayda değilde dikeyde flexbox özelliği güzel geliyor. Zamnım oldukça araştırıp yazmaya çalışacam.

Cevapla

oralunal diyor ki:

Nisan 3, 2011, 03:39

Artık jQuery div ortalama yapmak çok basit. Aşağıdaki makale ile bir div dikey ve yatay olarak ortalayabiliyorsunuz: http://www.trkodlama.com/jquery-ile-div-i-ortalam…

Cevapla

aliskan diyor ki:

Şubat 10, 2011, 20:34

hocam merhaba. yapmak istediği şey
3 adet alt alta div. 1. ve sonuncu divlerin yükseklikleri belli. örneğin 100px.
ortadaki div ise belirsiz yüksekliğe sahip olacak. yani ekran çözünürlüğü neyse yükseklik olarak 200px eksiği olacak. ortada kalan alanın tamamını kapsayacak.
nasıl yaparız. yöntem?

Cevapla