CSS ile Yatay ve Dikey Ortalama

CSS ile Yatay ve Dikey Ortalama

Bu makalede bir div elementini yatay ve dikey olarak ortalamayı göreceğiz

İlk önce sayfamıza bir div ekleyelim ve classını container olarak tanımlayalım.

<div class="container">

</div>

Şimdi yatay ortalamayı yapmak için css kodlarımızı ekleyelim 

<style type="text/css">
    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 200px;
        margin: -150px 0 0 -100px;
    }
</style>

Bu şekilde yataya ortalamayı yapmış olduk. Dikey ortalama için ise container classına yazdığımız kodları şu şekilde değiştiriyoruz

<style type="text/css">
    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 200px;
        margin: -150px 0 0 -100px;
    }
</style>

Burada top ve left değerlerini 50 % vererek ve position değerini absolute olarak vererek div elementimizin soldan ve yukarıdan eşit oranda ortalanmasını sağlıyoruz ve margin-top -150 px yani genişliğimizin yarısı ve margin-left -100px yüksekliğimizin yarısını negatif veriyoruz ve yatay ve dikey ortalamayı gerçekleştirmiş oluyoruz

Yorum Yaz

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

Yukarı Git