Dikey ve Yatay div ortalama

Eski yeni birçok tarayıcıda çalışan yatay ve dikey div ortalama kodu.

Bir divi dikey ve yatayda ortalamak için 1 satır css kodu birazda javascript kodu gerekiyor.

İnternette yer alan bir çok örnek birden çok katmanda yapılıyor ve eski tarayıcılar desteklemiyor her tarayıcı için de ayrı yöntemler icat ediliyordu.Ben burada tesadüfen bulduğum daha işlevsel bir yol göstereceğim.

Bu yöntem ie uyumluluk programı ile ie6 dan ie10 a kadar denenmiş ve ortalama kısmı çalışmıştır.Ayrıca Crhome,Firefox ve opera son sürümde denenmiştir.Kodları olduğu gibi html sayfası yapıp çalıştırabilirsiniz.


<!doctype html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>Yatay ve Dikey Ortalama</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <style type="text/css">

    *{margin:0;padding:0;}

    .govde{ position: absolute; width: 50%; height: 50%; left:50%; top: 50%; background-color: red; overflow: hidden;}

    </style>

    <script type="text/javascript">

    $(function(){

    responsive(".govde"); //  Sayfa yüklendiğinde fonksiyonu çalıştırıyoruz

    $(window).resize(function() {

    responsive(".govde"); // Pencere büyütülüp küçültüldüğünde yeniden çalıştırıp yeni değerlere göre Divi konumlandırmış oluyoruz.

    });



    });



    function responsive(nesne){

    var gen=$(nesne).outerWidth(); // Divin dış genişliğini alıyoruz

    var yuk=$(nesne).outerHeight(); // Divin dış yüksekliğini alıyoruz

    var l = Math.round(gen/2); // Genişliğin yerısını alıp tamsayıya yuvarlıyoruz

    var t = Math.round(yuk/2); // Yüksekliğin yarısını alıp tamsayıya yuvarlıyoruz



    // Css e eklemeler yapıyoruz

    $(nesne).css({

    'margin-left':'-'+l+'px', 

    'margin-top':'-'+t+'px'

    });    

    }

    </script>

</head>

<body>

<div id="govde" class="govde">

Bu Divi Tarayıcı Sorunu Olmadan Ortalıyoruz...

</div>    

</body>

</html>

  • Etiketler;
Ahmet YILDIRIM
1986 Trabzon doğumlu.İşletme mezunu olup, eğitim yılları içerisinde bir merakla başlayan web serüvenini internet sayesinde ileri seviyelere taşıdı. Yazılıma olan ilgisi onu bu alanda uzmanlaşmaya itti ve bir hobi olarak bulaştığı bu işi bir meslek olarak yapmaya karar verdi. <p>Şu anda freelance olarak işler yapmaktadır.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git