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

Web sitesi geliştirirken, HTML ve CSS kullanarak bir ögeyi sayfanın ortasına yerleştirmek gerekebilir. Bu işlem oldukça kolay olsa da, unutulabilir. Bu yazıda “HTML vs CSS ile div nasıl ortalanır?” sorusuna yanıt vereceğiz.

HTML – CSS ile Div Ortalama

HTML ve CSS ile div ortalamayı bir örnekle açıklayalım. İlk olarak, web sayfasına yeşil arka planlı bir kutu ekleyelim.

Pen’i görüntüle
Untitled by Emir Bolat (@speedev)
CodePen‘de.

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

Pen’i görüntüle
HTML – CSS Div ortalama – kod 1 by Emir Bolat (@speedev)
CodePen‘de.

İşte bu şekilde HTML ve CSS kullanarak div ortalama işlemini gerçekleştirebilirsiniz. Peki, bir div içinde yer alan ögeleri nasıl ortalarsınız? Bunu da gösterelim. Şimdi, yeşil arka planlı kutunun içine bir kırmızı kutu yerleştireceğiz.

Pen’i görüntüle
HTML – CSS Div ortalama – kod 2 by Emir Bolat (@speedev)
CodePen‘de.

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

Pen’i görüntüle
HTML – CSS Div ortalama – kod 4 by Emir Bolat (@speedev)
CodePen‘de.

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

Pen’i görüntüle
HTML – CSS Div ortalama – kod 4 by Emir Bolat (@speedev)
CodePen‘de.

Peki, CSS kodlarında kullanılan position, margin, display, justify-content ve align-items özelliklerinin ne işe yaradığını açıklayalım.

• position: Ögenin sayfadaki konumunu belirler. relative değeri ile ögenin normal akışta yer alması sağlanır. top, right, bottom veya left özellikleriyle kaydırma yapılabilir.
• margin: .container öğesini yatay olarak ortalamak için kullanılır. auto değeri ayarlandığında dış kenar boşlukları otomatik olarak ayarlanır, böylece ortalanır.
• display: .container öğesini bir flex kapsayıcı yapar. Böylece kapsayıcı içindeki öğeler yatay ve dikey olarak hizalanabilir.
• 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şlamak istiyorsanız, bu konudaki içeriğimize aşağıdan ulaşabilirsiniz.

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