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.
Natu teşekkürler bu jQuery ile yapılan işlem oldukça kullanışlı görünüyor.
Henüz taslak halinde(bitireceğim umarım!) ama şöyle bir şey de var:
http://docs.google.com/View?id=dhqz8jrq_22ddfhp6gm
Ellerine sağlık Berker. Bu da çok iyiymiş. (:
Bitmiş hali ne olacak, nedir planın?
Merhaba Simto,
Paylaşımıma yazında yer verdiğin için çok teşekkür ederim :)
Simto, çözüm aynı da cümleleri adam edip, birkaç ek yapmayı düşünüyorum :)
@Volkan; güzel paylaşımın için ben teşekkür ederim.
@Berker, bitir. Tüm çözümleri bir araya toplayalım. (:
Bende position: absolute verilen bir divin nasıl yatay ve dikey ortalandığını gösteren bir makalemi paylaşayım sizlerle :)
http://www.trkodlama.com/jquery-ile-div-i-ortalama-351.html
dikey ortalama için çok gereksiz bir yaklaşım olmuş bu işe java kullanmadan da halledebiliris. sen kulağını tutmak için kolunu bacağının altından geçirmiş sonra beline 3 tur dolamış ve sonra kulağını tutmuşssun :> o işi css ilede halledebilirisin yazmış taşıyıcı ce icerik class ları ile olmaz
kolay gelsin…
Her durum ve şartta, cross browser testini aşabilecek dikey ortalama mümkün olmuyor.
Zaten bu çok yaygın bilinen bir sorun. http://goo.gl/Z5hlH
Benimki de çözüm yöntemlerinden biri.
teşekkürler