HTML - CSS Div Ortalama Nasıl Yapılır?

HTML ve CSS ile bir web sitesi geliştirirken ön yüz tarafında bir ögeyi sayfanın ortasına koymak gerekebilir. Bunu yapmak oldukça basit ancak yine de unutulabilir. Biz de bu içeriğimizde “HTML vs CSS div ortalama nasıl yapılır?” sorusunu cevaplandırdık.

HTML – CSS Div ortalama

HTML – CSS div ortalamayı bir örnek üzerinden anlatalım. Öncelikle web sayfasına yeşil arka planlı bir kutu yerleştirelim.

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

Şimdi bu yeşil arka planlı kutuyu sayfanın ortasına taşıyalım yani div ortalama işlemini yapalım.

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

Bu şekilde HTML – CSS ile div ortalama yapabilirsiniz. Peki bir div içindeki ögeyi nasıl ortalarsınız? Bunu da gösterelim. Şimdi yeşil arka planlı kutunun içine bir kırmızı kutu koyalım.

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

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

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

Şimdi kırmızı kutuyu dikey olarak da ortalayalım.

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

Peki CSS kodlarında kullanılan position, margin, display, justify-content ve align-items özelliklerinin kullanım amacı ne? Sırasıyla açıklayalım.

position: Ögenin sayfa üzerindeki konumunu belirler. relative değeri, ögenin normal akışta yer almasınını mümkün kılar. top, right, bottom, veya left özellikleri kullanılarak kaydırma yapılabilir.
margin: .container ögesini yatay olarak ortalamak için kullanıldı. auto değeri verildiğinde dış kenar boşlukları otomatik olarak ayarlanır, böylelikle ortalanır.
display: .container ögesini bir flex kapsayıcı yapar. Böylelikle kapsayıcı içindeki ögeler, yatay ve dikey olarak hizalanabilir.
justify-content: .container içindeki ögelerin yatay olarak hizalanması için kullanıldı.
align-items: .container içindeki ögelerin dikey olarak hizalanması için kullanıldı.