jQuery ile Div’i Ortalama

Bugün jQuery kullanarak bir div elementini sayfanın nasıl ortasına yerleştireceğinizi anlatıyorum.

Bu makalede jQuery’nin width() ve height() fonksiyonlarından faydalanıyoruz. Lafı fazla uzatmayalım. Öncelikle bir index.html adlı dosya oluşturalım. Daha sonra bu dosyanın içine aşağıdaki kodu ekleyelim:

$(document).ready(function(){
    var blok = $('#orta');
    var yuk = $(window).height();
    var gen = $(document).width();
    var sT = window.scrollY;
    $('#orta').css({
        left : gen/2 - (blok.width() / 2),
        top : sT + yuk/2 - (blok.height() / 2)
    });
});

$(document).ready(function(){

var blok = $('#orta');

var yuk = $(window).height();

var gen = $(document).width();

var sT = window.scrollY;

$('#orta').css({

left : gen/2 - (blok.width() / 2),

top : sT + yuk/2 - (blok.height() / 2)

});

body{
    background-color: #0000CC;
}
#orta{
    position: absolute;
    width: 250px;
    height: 250px;
    background-color: #CC0000;
}

body{

background-color: #0000CC;

}

#orta{

position: absolute;

width: 250px;

height: 250px;

background-color: #CC0000;

}

&lt;html&gt;
&lt;head&gt;
&lt;!-- Stil ve JS dosyalarını yükleyin. --&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="orta"&gt;Bu Blok Sayfayı Tam Ortalayacaktır&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<div id="orta">Bu Blok Sayfayı Tam Ortalayacaktır</div>

</body>

</html>

Burada tam olarak şunu yaptık. yuk değişkenine geçerli pencerenin yüksekliğini atadık. #orta adlı bloğun top değerini bulduğumuz yuk değerinin yarısından #orta adlı bloğun yarısını çıkararak bulduğumuz değeri atadık. Bu sayede sayanın dikey olarak tam ortasına yerleştirmiş oluyoruz. Aynı mantıkla yatay olarak yerleştirdik.

GÜNCELLEME: Flexbox ile ortalama için tıklayınız.

Herkesin problemi var genelde bu sayfa ortalama ile ilgili. Bende paylaşmak istedim sizinle. Umarım anlatabilmişimdir.

Kolay gelsin,

jQuery ile Div’i Ortalama

Yazar: Oral ÜNAL

Yorumlar

Bir yanıt yazın Yanıtı iptal et

jQuery ile Div’i Ortalama

Yazar: Oral ÜNAL

Bunlarda İlginizi Çekebilir

Yorumlar

Bir yanıt yazın Yanıtı iptal et