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

İlgili Yazılar:

23 Yorum (Yorum Ekle)

Cihad diyor ki:

Mayıs 5, 2008, 10:08

merhaba,

bir tabloyu sayfamızın tam ortasına nasıl hizalarız? yatay ve dikey olarak tam ortada olacak. yardımcı olabilirseniz çok mutlu olurum.

iyi çalışmalar.

Cevapla

Salih S. DEMİR diyor ki:

Nisan 24, 2008, 18:21

Benim aşağı doğru açılır kapanır hoş bir menü taslağım var doğal olarak kullanıyorum. Menü linkleri tagı içinde ama link üstte dayalı, ben ortalamk için ne yapacağımı bulamadım yazdığınız kodları denedim olmadı daha doğrusu kodu neye yazmam gerektiğini çöemedim, eğer li tagında işe yarasa bir örnek yaparsanız sevinirim.

Cevapla

Eser DALDAL diyor ki:

Mart 7, 2008, 17:26

merhabalar sayfa ortalama konusunda bir sorunum var….:(
photoshop ile tasarladığım çalışmayı div etiketleri kullanarak web sayfası olarak kaydettiğimde, sayfa sola dayalı şekilde kaydediliyor. Bunu söylediğiniz yöntemleri kullandığımda da bu sefer de photoshopun belirlediği pozisyonlar değiştirilir ya da iptal edilirse de imajların konumları kayıyor…
Bu konuda nasıl bir çözüm önerirsiniz..

Cevapla

ahmet ziya diyor ki:

Şubat 23, 2008, 15:51

Fatih Bey,
Ben bir site hazırladım ve tüm nesnelerin hizalamasını da css ile div tagını kullanarak katmanlar şeklinde yaptım. css nin position bileşenini kullandım. Buraya kadar normal. Fakat kullandığım bilgisayarda tam ortaladığım site, 15″ monitöre sahip bir bilgisayarda sağ tarafa yaslanmış hatta, birazı da görünmez bir halde görünüyor. Bu büyük bir problem şüphesiz ama css’de bu problemi çözmeye çalışırken tüm nesnelerin sayfanın tam ortasına yığılması daha da büyük bir problem. Bu aşamada size tam olarak sormak istediğim şey şu, siteyi komple, aynı olduğu şekilde tüm ekran boyutlarında ve internet tarayıcılarında tam ortada görmek için şu aşamada neler yapmalıyım.

Şimdiden teşekkür ediyorum. Bu zamana kadar verdiğiniz emek sonucu öğrendiğimiz bilgileri unutmuyorum, elinize emeğinize sağlık…

Cevapla

fatih.hayrioglu diyor ki:

Aralık 1, 2007, 17:24

CSS ile sayfalarımızı ve elementlerimizi ortalamak makalemizde yatay ortalamayı anlatmıştık.

Cevapla

fatih diyor ki:

Kasım 30, 2007, 20:18

tamam guzel ama yatay ortalamayi arattim bulamadim sitenizde. farkli forumlarda ve bloglarda inceledim ama nedense
http://kalkan.org/huseyin
adresinde yaptigim yatay ortalama cok garip oldu firefozda hicbirsey farketmedi iexplore da sayfa tamamen saga kaydi ;(

Cevapla

mustafa un diyor ki:

Nisan 5, 2007, 08:05

Selam,

Öncelikle verdiginiz degerli bilgiler için tesekkürler.

Ben css ile bir stretchable (asagiya dogru uzayan) tasarim yapmak istiyorum. Yani icerik olmasada height 100% verdiginiz bölümler uzayarak browseri boydan kaplayan tasarimlardan.

Bunu html kodlariyla rahatlikla yaparken css de ayni sonucu vermedi. Acaba css de height 100% ozelligi kalktimi? Tepki vermiyorda

Ayrica doctype konusuda neye göre hangi doctype i sececegimize nasil karar verebiliriz? Ornegin css kullanarak div id belirlenen bi sayfada hangisi secilmeli?

tekrar Cok tesekkürler

Cevapla

fatih.hayrioglu diyor ki:

Ocak 30, 2007, 21:28

Evet bir yanlışlık yapmışız kodlama yaparken. Düzelttim. şimdi çalışıyor.

Uyarı için teşekkürler Yunus

Cevapla