info[at]oguzhanavci.com

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

17.02.2015

CSS Kodlama
8029
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.
 

Oğuzhan Avcı

Oğuzhan Avcı

2011 yılından beri Front-End geliştirici olarak çalışmaktayım. Front-End alanında HTML & CSS, Bootstrap, JavaScript, Responsive Web Design, SASS & LESS, UI / UX, Git Versiyon Kontr...

İlginizi Çekebilir

Yorum Yap