CSS Kullanarak Yatay ve Dikey Olarak Div (Divider) Nasıl Ortalanır?

CSS absolute div yatay ve dikey ortalama (kesin çözüm) nasıl yapılır bu yazımızda cevabını bulacaksınız. CSS ile absolute position div’leri yatay ve dikey ortalamak için aşağıdaki kodu kullanabilirsiniz. Bu işlemde önemli olan absolute div’imizi kapsayan “ilk” kapsayıcı alanın position değerinin “relative” olmasıdır. Eğer kapsayan div ilk değil bir sonraki ise ortalama işlemi ait olan elemanı referans alınarak yapılacağı için sonuç alamayacaksınız.

CSS Absolute Div Yatay ve Dikey Ortalama Kodu

.kapsayan {
  position: relative;
}

.ortalanacak{
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

CSS Yatay Ortalama Kodu

Sitenizde bulunan bir div veya kapsayıcı herhangi bir öğe içeriğini text-align property’sini kullanarak ortalayabilir, sağa veya sola yaslı olarak ekrana basılmasını sağlayabilirsiniz.

Örnek kullanım;

.kapsayiciDiv{
 text-align:center;
}

CSS Sağa Yaslama Kodu

Herhangi bir alan içerisindeki öğeyi / içeriği sağ tarafa yaslamak için yine aynı şekilde text-align propoerty’sini kullanabilirsiniz. Bu sefer “center” değeri yerine “left” değerini kullanarak kapsayıcı içerisinde bulunan içeriğimizi sol tarafa yaslı görüntülenecek şekilde ekrana basma işlemimizi gerçekleştiriyoruz.

Örnek kullanım;

.kapsayiciDiv{
 text-align:left;
}

CSS Sol Yaslama Kodu

Eğer kapsayıcı içeriğindeki öğeyi sola değilde sağa yaslamak istiyorsak bu defa text-align değerini center veya left değil “right” olarak belirlememiz gerekiyor.

Örnek kullanım;

.kapsayiciDiv{
 text-align:right;
}

Bir örnek;

Şimdi sitemizde bulunan bir paragraf içerisindeki öğeleri wordpress’te bulunan bir özelliğin nasıl kodlandığını da anlayabilmek için ilk olarak içerisindeki ilk harfi büyük hale getirip ardından sağa doğru yaslayalım.

p::first-letter {
text-align:right;
}

CSS ::first-letter pseudo’su hakkında daha fazla bilgi almak için tıklayabilirsiniz.