Div Elementini Yatay ve Dikey Olarak Ortalayın

teknoloji haberinin
değil, bilgisinin
peşinde...

"WEB"in Son Çıkan Önemli Yazıları

Revaçta Olan Konular

Sitede şu an 1546 yazı bulunmaktadır.

Follow @esibercom

Gerçek İnternet Hızı Ölçüm ve Test Aracı

Online Virüslü ve Zararlı Siteleri Tespit Edin

Özel Yazılar

Çok Okunanlar

Son Yazılar

Rastgele Yazılar

Son Yorumlar

CSS'de bazen herhangi bir div elementini ilgili yerde veyahut sayfaya göre hem yatay hem de dikey olarak ortalamak çok zor olabiliyor. Bunun için türlü türlü yollar geliştiriliyor. İşte hem yatay hem de dikey ortalama için CSS ve jQuery çözümleri.

CSS ile yatay hizalama

.classAdi{
margin:0 auto;
width:200px;
height:200px;
}

Bu methot div, paragraf, h1 gibi blok seviye elementlerde çok kolay işe yarar. Linkler ve resimler gibi inline elementler içinse yukarıdaki kodlara ek olarak " display: block; " demeniz gerekmektedir. Demo: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/1.html

CSS ile hem yatay hem de dikey hizalama

.classAdi{
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px;
}

Yukarıdaki yöntemde elementin pozisyonunun pencere boyutuna bağlı olarak değişkenliği "absolute" ile, soldan ve üstten %50 diyerek te elementin en solunun pencerenin en sol uç köşesine göre ve elementin en üstünün pencerenin en üst uç noktasına göre mesafenin ne olacağını belirler. Marginin top kısmının elementin yüksekliğinin yarısı kadar negatifini ve right kısmının ise elementin genişliğinin yarısı kadar negatifini alaraktan div elementinin komple hizalamasını yapmış oluyoruz. Demo: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/2.html

jQuery ile hem yatay hem de dikey hizalama

$(window).resize(function(){

    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

jQuery demosu: http://demo.tutorialzine.com/2010/03/centering-...

Adres: http://tutorialzine.com/2010/03/centering-div-vertically-and...

div · css · jquery · div ortalama · div hizalama · yatay ortalama · yatay hizalama · dikey ortalama · dikey hizalama · css ortalama · css hizalama · jquery hizalama · jquery ortalama · html ortalama · html hizalama · html ·

Yazan: M. Mekin Pesen | 08.03.2010 | 6630 kez okundu.

Face

Tumblr'da paylaş

WEB

Yukarı Çık