CSS ile Dikey Ortalama

http://www.erbilen.net/demo/css_dikey_ortalama/index.html

Bazen yüksekliği değişken olan bir nesnenin içerisindeki değerleri dikey olarak ortalamamız gerekir.. Normal şartlarda vertical-align ile dikey ortalama yapabilsekte değişken yükseklikte bu işe yaramıyor.. Hal böyle olunca işe yaraması ve her tarayıcıda çalışabilmesi için neler yapmamız gerektiğini kısaca inceleyelim.

Nasıl Yapacağız?

Kapsayıcı nesnemize display: table verip o nesneyi tablo yapacağız.. Daha sonra dikey olarak ortalayacağımız nesneye ise display: table-cell deyip vertical-align: middle ile dikey olarak ortalama işlemimizi gerçekleştireceğiz.. Bunu yapmadığımız taktirde vertical-align görevini doğru olarak yerine getiremiyor.

Hadi Yapalım

<!DOCTYPE>
<html>
<head>
	<title>css dikey ortalama</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.box {
		width: 500px;
		height: 300px;
		background: #111;
		color: #fff;
		display: table
	}
	.box p {
		display: table-cell;
		vertical-align: middle;
		text-align: center
	}
	</style>
</head>
<body>

<div class="box">
	<p>
		burası ortalanacak..
	</p>
</div>

</body>
</html>

Evet artık modern tarayıcılarda dikey ortalama işlemimizi gerçekleştirdik.. Ancak bu şekilde IE8+ üzerinde çalışacaktır.. IE7- ve alt sürümleri için ise (eğer uyumlu hale getirmek istiyorsanız) html yapımızda değişiklik css kodlarımızda ilave yapmamız gerekecek..

IE7 ve alt sürümleri için fix

CSS özelliklerinin IE7 ve alt sürümlerde çalışması için özellik başına # işareti getirilmesi yeterlidir.. # yerine _ işareti getirilir ise IE6 ve alt sürümleri için geçerli bir işlem olur. Bizim sorunumuz IE7 ve alt sürümleri için olduğundan # işareti koyacağız.. Öncelikle html yapımızı şöyle değiştireceğiz;

<div class="box">
	<p>
		<span>
			burası ortalanacak..
		</span>
	</p>
</div>

Gördüğünüz gibi fazladan bir span nesnesi ekledik.. Şimdi geldik css kodlarımızda ki eklemelere;

.box {
	width: 500px;
	height: 300px;
	background: #111;
	color: #fff;
	display: table;
	#position: relative
}
.box p {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	#position: absolute;
	#top: 50%;
	#width: 100%
}
.box p span {
	#position: relative;
	#top: -50%
}

İlk olarak kapsayıcı nesneye position: relative verdik ki içerisindeki nesnelere absolute uyguladığımızda dışarıya kaçmasın. Daha sonra nesne içindeki ilk nesnemize (yani paragraf nesnemize) pozisyon değerleri uyguladık. Ve onun içindeki span nesnesine de tekrar pozisyon değerleri uygulayıp doğru bir sonuç aldık.. Ekstra olarak pozisyon özelliği uyguladığımız için paragraf nesnesi genişliğini içeriğe göre şekillendireceğinden yatay ortalama geçersiz kalıyordu.. Bunu da genişliğini 100% vererek çözdük.

Demo

http://www.erbilen.net/demo/css_dikey_ortalama/index.html

Kaynak Dosya(lar)

http://www.erbilen.net/demo/css_dikey_ortalama/indir.rar

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS ile Dikey Ortalama” üzerine 6 yorum

  1. <style>
    .box { width:500px; height: 300px; background-color: #111; color:#FFF; line-height: 300px; text-align: center;}
    </style>

    <div class="box">
    <p> Deneme </p>
    </div>

    böylede oluyor

  2. @Ercan, keşke öyle olsaydı 🙂 o zaman bizde bu kadar uğraşmazdık.. Senin burada yaptığın sadece bir satırlık yazıyı ortalamak.. Ancak hiç paragrafa renk verip paragrafın aslında nerede kaldığını görmeyi denedin mi? Ya da hiç yazıyı artırıp ne kadar gözükebileceğini 🙂 bu yüzden gösterdiğim yöntem doğru bir yöntemdir.

    Senin dediğine göre yaptığımızda çıkan sonucu inceleyebilirsin;
    http://www.codepen.io/tayfunerbilen/pen/ejdID

  3. kardeşim ie 6-7 de # koyduğumuzda bütün sıkıntı çözülüyo yani bunu anladım doğrumudur kardeşim eline sağlık teşekkürler

  4. Merhaba tayfun, #position:relative böyle kullandığımız zaman w3c css doğrulamasından bir türlü geçemiyor. Buna geçmesi için ne tür bir şey kullanabiliriz. Cevap verirsen sevinirim 🙂

  5. Selam Ahmet,
    Bunun için yapabileceğin bir şey var. CSS dosyası çağırdığın yerde şunu yaz;

    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="i7.css" />
    <![endif]-->

    Daha sonra bir ie7.css dosyası oluştur ve içine şunları ekle;

    .box {
    	position: relative
    }
    .box p {
    	position: absolute;
    	top: 50%;
    	width: 100%
    }
    .box p span {
    	position: relative;
    	top: -50%
    }

    Sorun düzelecektir.

  6. Teşekkürler Tayfun, bende aynı mantıkla çalışan 'browserselector' buldum. Onunla hallettim 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir