Farkettim ki uzun zamandır hiç işe yarar bir şeyler paylaşmıyor, hem kendi dünyamda olup bitenleri yazıyorum. Bunun üzerine yakın zamanda yaşadığım bir sorunun çözümünü paylaşmak istedim. Sorun XHTML/CSS ile bir nesnenin dikey ortalanması.
Biliyorsunuz, css ile bir div’i doğrudan dikey ortalamak mümkün değil. Ancak, çeşitli tekniklerle tabii ki mümkün. Bu konuda daha detaylı bilgi ve yöntemlerden biri Fatih Hayrioğlu’nun CSS ile Dikey Ortalama başlıklı makalesinde mevcut.
CSS ile dikey ortalamak için Tolga Arıcan‘dan öğrendiğim başka bir yöntem ise şöyle;
Dikey ortalanacak divimizi kapsayan, position:relative bir div oluşturmak. Ortalanacak div’imizi ise position:absolute; yapıyor ve içerik yüksekliği kadar yukarıdan eksi margin veriyoruz. Örnek kodlar şu şekilde:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dikey ortalama</title>
<style>
.tasiyici {width:300px; height:600px; position:relative; background:#e1deee;}
.icerik{ position:absolute; top:50%; left:0; margin-top:-30px; width:200px; text-align:center; background:#fea200;}
</style>
</head>
<body>
<div class="tasiyici">
<div class="icerik">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>
</body>
</html>
Bu kod ile gözlemlediğim kadarıyla browser’lar arası bir uyum problemi yaşanmıyor. Fakat bu yöntem de yüksekliği belirsiz alanlarda hiçbir işe yaramayacaktır. Bu noktada imdadımıza bir jQuery fonksyonu koşuyor.
Fonksyonu bir kaç gün önce, ufak bir Google araması ile buldum. Bugün makalesinin linkini almak için Fatih Hayrioğlu’nun bloguna girince bu fonksyona açılan bir linki görmem de sürpriz oldu. Her neyse…
Aşağıdaki jQuery fonksyonu üzerinde bir değişiklik yapmadan JavaScript dosyanıza, çalışma belgenize ya da uygun bulduğunuz bir yere kopyalayın:
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);
Daha sonra dikey ortalanmasını istediğiniz nesne(ler) ile birlikte şu şekilde fonksyonu çağırabilirsiniz.
$('.ortalanacakDiv').vAlign();
Veya çoklu kullanım için
$('.ortalanacakDiv1, .ortalanacakDiv2, .ortalanacakDiv3').vAlign();
Bu fonksyonun yapmaya çalıştığı şey aslında CSS ile yaptıklarımızın bir tekrarı niteliğinde. Ancak fonksyon burada kapsayıcı div ve içerik div’inin yüksekliklerini (biz height değeri vermesek dahi) bularak, margin ve top değerlerini kendi hesaplıyor, bize zahmet vermeden nesnelerin CSS’lerini kendi düzenliyor.
Eğer yapmak istediğiniz şey nesneyi ekrana göre ortalamak ise Volkan Görgülü’nün jQuery ile Dikey Ortalama başlıklı video paylaşımı da oldukça işinize yarayacaktır.