Div Elementini Yatay ve Dikey Olarak Ortalayın

Google Güvenlik Teknoloji Programlar Sosyal Medya Flash Oyunlar Web Siteleri Web Teknolojileri PDF Önizleme Aracı Virüs Tarama Aracı Link Şifreleme Aracı PageRank Ölçme Aracı		TCP-IP VoIP GSM Fiber Optik WiMAX SEO Flash Htaccess Web Tasarım Web Programlama
HABERLEN Haberlen.com domain adresi satılıktır. Domain for sale ( 125*125 ) - SPONSOR - REKLAM ALANI SPONSOR OLMAK İSTER MİSİNİZ? İnterneti En Çok Kullanan İlk 20 Ülke ve Penetrasyonları 3 Boyutlu Flash Resim Döndürmeleri/Slider Yapın Telifsiz Çok Kaliteli Vektör Grafik Çalışmaları Ücretsiz Yüzlerce Yansıma Özellikli ve Monokrom İkon 80 Adet Pürüzsüz ve Parlak İkon Blog ve Web Sitelerini Mobil Sitelere Online Dönüştürme Servisleri Dünyanın En Çok Ziyaret Edilen İlk 1000 Sitesi İnternete Koyduğunuz Resimlerden Adresinizin Bulunabileceğini Biliyor Muydunuz Ülkelere Göre Google Arama Motoru Pazar Payları Yükselen Teknoloji Gerçek-Zamanlı Arama Rapidshare İndirme Kısıtlamasını Ortadan Kaldırın Pratik İnternet Hız Testleri 4Shared.com'da Ücretsiz Film, Müzik ve E-Kitap Arama Rapidshare ile Video, Film, Müzik ve Program İndirin 1000'in Üzerinde iPhone Uygulaması ve Programı Ücretsiz Cep Telefonu Videoları (.3gp) Blow Up, Klasik Top Vurma-Patlatma Oyunu Arrow Shooter, Adamın Kafasındaki Elmayı Vurun Ücretsiz 3B Animasyon, Film ve İçerik Yapma Programı Online Açık Kameraları Bulmak

E-Siber.com » Web Programlama » Div Elementini Yatay ve Dikey Olarak Ortalayın

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...