E-Siber.com
M. Mekin Pesen
Sitede 1775 okunmaya değer yazı var.

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


· · · · · · · · · · · · · · · ·
Yazan: | 08.03.2010 | 20953 kez okundu.

Yazılar E-Posta Kutunuza Gelsin:

Bu yazıyı izinsiz olarak alıp başka herhangi bir yerde yayınlayamazsınız (Bkz "dijital at hırsızı" kimdir?). Yazıların başka yerlerde yayınlanmasına ücreti mukabili izin veriyoruz. Yazıları izinsiz olarak başka bir yerde yayınlamanız, her türlü hukuki sonucu kabul ettiğiniz manasına gelir. Yazıları izin almak ve kaynak göstermek kaydıyla sadece kamu kurumları ve akademik araştırmacılar ücretsiz olarak kullanabilir. Bunların dışında kalan herkes ücret öder. Detaylar için bize ulaşın.

Yorum altyapısı: Disqus

Yukarı Çık

M. MEKİN PESEN
© 2007-2015 E-SİBER BİLGİ-İLETİŞİM TEKNOLOJİLERİ
E-Siber.com | E-Siber.net | ESiber.com | ESiber.net | RSS | Facebook | Twitter | E-Posta Aboneliği
IP: 54.81.47.168 | Yüklenme: 0.359 saniye. | Hakkımızda | İletişim | Reklam Verin | Site Politikaları | Atıflar