info[at]oguzhanavci.com

CSS'te Div Ortalama Nasıl Yapılır?

17.02.2015

CSS Kodlama
2903
0
CSS'te Div Ortalama Nasıl Yapılır? - Oğuzhan Avcı

Bu yazımda CSS kullanarak oluşturduğumuz bir div'i nasıl ortalayacağımızı anlatacağım.

Örnek olarak bir Web sitesini ortada hizalamak için bu css kodlarına ihtiyacınız olacak. Mutlaka bilinmesi gereken kodların başında gelmektedir. 

Öncelikle bir çalışma dosyası açalım. gerekli şeyleri yaptıktan sonra aşağıdaki işlemleri yapmaya başlayabiliriz.

Div ortalamak için kullanılan en yaygın kod margin:auto'dur.

 

 

 

 

 

 

#deneme {
    width: 600px;
    height: 300px;
    padding: 20px;
    background-color: skyblue;
}

 

 

 

 

Ekran görüntüsü aşağıdaki gibi olacaktır.



Şimdi div'i ortalamak için margin:auto yazıyoruz.


#deneme {
    width: 600px;
    height: 300px;
    padding: 20px;
    background-color: skyblue;
    position: relative;
    margin: auto;
}

 

#deneme {
    width: 600px;
    height: 300px;
    padding: 20px;
    background-color: skyblue;
}

 

Kodumuzun böyle yazıldığını varsayıyoruz,
 

#deneme {
    width: 600px;
    height: 300px;
    padding: 20px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
}

CSS kodumuzun position'unu absolite yaptık, sonra sağdan ve üstten %50 pay bıraktık.

Div'imiz bu şekilde şimdilik, devam ediyoruz

 

#deneme {
    width: 600px;
    height: 300px;
    padding: 20px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -150px;
}

 



Div'imize yeni özellikler ekleyerek margin-left:-300px yaptım. Nedeni ise belirlediğimiz Div'in 600px genişliğinde olması. Genişliğin yarısı kadar soldan eksi olarak boşluk bırakıyorum. Aynı işlemi yüksekliğimizin 300px olması nedeniyle margin-top:-150px olarak yukarıdan ortalıyorum.
 

Reklam

Oğuzhan Avcı

Oğuzhan Avcı

2011 yılından beri Front-End & Back-End olarak çalışmaktayım. C#, .NET MVC & Katmanlı Mimari, JS, SQL, CSS, Bootstrap Tema, Photoshop konularında tecrübe sahibiyim v...

Reklam

Yorum Yap

Reklam