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.relativedeğeri, ögenin normal akışta yer almasınını mümkün kılar.top,right,bottom, veyaleftözellikleri kullanılarak kaydırma yapılabilir.margin:.containerögesini yatay olarak ortalamak için kullanıldı.autodeğeri verildiğinde dış kenar boşlukları otomatik olarak ayarlanır, böylelikle ortalanır.display:.containerögesini birflexkapsayıcı yapar. Böylelikle kapsayıcı içindeki ögeler, yatay ve dikey olarak hizalanabilir.justify-content:.containeriçindeki ögelerin yatay olarak hizalanması için kullanıldı.align-items:.containeriçindeki ögelerin dikey olarak hizalanması için kullanıldı.
Eğer yazılıma başlamak istiyorsanız, bununla ilgili içeriğimize aşağıdan ulaşabilirsiniz.
Türkiye’de yazılımcı maaşları içinse aşağıdaki haberimize göz atabilirsiniz.
{{user}} {{datetime}}
{{text}}