HTML – CSS ile Div Ortalama Nasıl Yapılır?

Bir web sitesi geliştirirken, HTML ve CSS kullanarak sayfanın ortasında bir öğeyi konumlandırma ihtiyacı doğabilir. Bu işlem oldukça basit olsa da bazen gözden kaçabilir. Bu yazımızda “HTML ve CSS ile div nasıl ortalanır?” sorusunu yanıtlayacağız.

HTML – CSS ile Div Ortalama

Öncelikle HTML ve CSS ile div ortalamayı bir örnek üzerinden inceleyelim. İlk olarak, web sayfasında yeşil bir arka plana sahip bir kutu oluşturalım.

See the Pen
Untitled by Emir Bolat (@speedev)
on CodePen.

Şimdi ise bu yeşil arka planlı kutuyu sayfanın ortasına yerleştirerek div ortalama işlemini gerçekleştirelim.

See the Pen
HTML – CSS Div ortalama – kod 1 by Emir Bolat (@speedev)
on CodePen.

İşte bu şekilde HTML ve CSS kullanarak div’inizi ortalayabilirsiniz. Peki, bir div içerisindeki öğeyi nasıl ortalayabilirsiniz? Bunu da göstereceğiz. Şimdi yeşil arka planlı kutunun içine kırmızı bir kutu koyalım.

See the Pen
HTML – CSS Div ortalama – kod 2 by Emir Bolat (@speedev)
on CodePen.

Şimdi kırmızı kutuyu yatay olarak ortalayalım.

See the Pen
HTML – CSS Div ortalama – kod 4 by Emir Bolat (@speedev)
on CodePen.

Şimdi de kırmızı kutunun dikey olarak ortalanmasını gerçekleştirelim.

See the Pen
HTML – CSS Div ortalama – kod 4 by Emir Bolat (@speedev)
on CodePen.

Peki, CSS’de kullanılan position, margin, display, justify-content ve align-items gibi özelliklerin işlevi nedir? Sırasıyla açıklayalım.

• position: Ögenin sayfa üzerindeki konumunu ayarlar. relative değeri, öğenin normal akışta yer almasına olanak tanır. top, right, bottom, ya da left özellikleri kullanılarak kaydırma yapılabilir.
• margin: .container öğesini yatay olarak ortalamak için kullanıldı. auto değeri verildiğinde, dış kenar boşlukları otomatik olarak ayarlanarak ortalanmasını sağlar.
• display: .container öğesini bir flex kapsayıcı yaparak içindeki öğelerin yatay ve dikey olarak hizalanmasını mümkün kılar.
• justify-content: .container içindeki öğelerin yatay hizalanması için kullanılır.
• align-items: .container içindeki öğelerin dikey hizalanması için kullanılır.

Yazılıma başlama konusunda daha fazla bilgi edinmek istiyorsanız, ilgili içerikimize aşağıdan ulaşabilirsiniz.

Türkiye’de yazılımcı maaşları hakkında daha fazla bilgi almak için aşağıdaki haberimize göz atabilirsiniz.