CSS'te Div Ortalama

Bu dersimizde CSS ile nasıl bir div'i ortalayabileceğimizi öğreneceğiz.

margin: auto

Bir div'i ortalarken en çok kullanılan teknik margin: auto'dur.

        body {
            font-family: Verdana, monospace, sans-serif;
            font-size: 12px;
            font-weight: bold;
            text-align: justify;
            min-height: 800px;
        }
        #deneme {
            width: 600px;
            height: 300px;
            padding: 20px;
            background-color: skyblue;
        }
    

Bu şekilde CSS kodlarına sahibiz.

css'te arkaplan
Büyütmek için resme tıklayınız.

Bu şekilde de bir ekran görüntüsüne sahibiz.

        body {
            font-family: Verdana, monospace, sans-serif;
            font-size: 12px;
            font-weight: bold;
            text-align: justify;
            min-height: 800px;
        }
        #deneme {
            width: 600px;
            height: 300px;
            padding: 20px;
            background-color: skyblue;
            position: relative;
            margin: auto;
        }
    

Bu div'i sayfada ortalamak istersek margin: auto yazmamız yeterlidir.

css'te arkaplan
Büyütmek için resme tıklayınız.

Görselde de görüldüğü gibi div'imiz sayfada ortalandı.

div içinde div ortalama

Bir div içinde başka bir div ortalamak için yine aynı tekniği kullanıyoruz.

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

Şeklinde deneme2 ID'sine sahip yeni div'imizi deneme ID'sine sahip div'imizin içine yerleştirelim.

css'te arkaplan
Büyütmek için resme tıklayınız.

Yeni div'imiz ekran çıktısında da görüldüğü gibi yeni div'imizin içine yerleştirildi. Fakat henüz ortalanmadı.

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

Bunun için yeni div'imizin özelliklerine position: relative; margin:auto; kodlarını eklememiz yeterlidir.

css'te arkaplan
Büyütmek için resme tıklayınız.

Ekran görüntümüz bu şekilde olacaktır. deneme2 ID'sine sahip yeni div'imiz deneme ID'sine sahip div'imiz içinde ortalandı.

Bir div'i Sayfada Yatay ve Dikey Eksenlerde Ortalama

Bir div'i yatay ve dikey eksenlerde ortalamak için beşli bir kombinasyona ihtiyacımız var.

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

CSS kodlarımızın bu şekilde olduğunu varsayalım.

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

position özelliğini absolute olarak belirledikten sonra üstten ve sağdan %50 oranında bir ayrılma payı bırakıyorum.

css'te arkaplan
Büyütmek için resme tıklayınız.

Bu şekilde bir ekran görüntüsüne sahibiz; fakat henüz div'imizi sayfamızda tam olarak ortalayamadık.

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

Daha sonra margin-left özelliğinin değerini -300px olarak belirliyorum. Bunun sebebi div'imizin genişliğinin 600px olması. Div'imizin genişliğinin yarısı kadar sola eksi değerde hücre dışı boşluk veriyorum. Aynı şekilde margin-top'a -150px vererek yukarıdan da ortalama yapıyorum. -150px olmasının sebebi ise div'imizin yüksekliğinin 300px olması. Bunun da yarısı kadar yukarı eksi kaydırma yapıyorum.

css'te arkaplan
Büyütmek için resme tıklayınız.

Görselde de görüldüğü gibi artık yeni div'imiz sayfamızda yatay ve dikey eksenlerde ortalandı.

        #deneme {
            width: 320px;
            height: 140px;
            padding: 20px;
            background-color: skyblue;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -160px;
            margin-top: -70px;
        }
    

Div'imizin genişliği 320px ve yüksekliği 140px olsaydı margin-left değerimiz -160px (320/2), margin-top değerimiz ise -70px (140/2) olmalıydı.

css'te arkaplan
Büyütmek için resme tıklayınız.

Ekran görüntümüz ise bu şekilde olacaktı.

Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.

Bu derslik bu kadar. Bir sonraki dersimizde CSS'te sözde sınıflar konusuna değineceğiz.

Diğer derse geçmek için tıklayınız. >>>
Come to the Dark Site!