Teknoloji

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

HTML vs CSS ile ön yüz geliştirirken bir ögeyi nasıl sayfanın ortasına alırsınız? İşte HTML ve CSS ile div ortalama...

HTML – CSS Div Ortalama Nasıl Yapılır?
24-08-2024 18:52

HTML ÖZETİ| 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ı.

Eğer yazılıma başlamak istiyorsanız, bununla ilgili içeriğimize aşağıdan ulaşabilirsiniz.

Yazılıma nasıl başlanır? Hangi dili tercih etmeliyim? Rehber!

Yazılıma nasıl başlanır? Hangi dili tercih etmeliyim? Rehber!

Bu içeriğimizde yazılıma başlamak isteyenler için "yazılım nedir?" ve "yazılıma nasıl başlanır?" sorularını cevaplandırdık.

Türkiye'de yazılımcı maaşları içinse aşağıdaki haberimize göz atabilirsiniz.

Türkiye'de yazılımcıların kaç para kazandığı belli oldu! – 2024

Türkiye'de yazılımcıların kaç para kazandığı belli oldu! – 2024

Yazılımcılık, son yıllarda en fazla ihtiyaç duyulan mesleklerden birisi. Peki 2024 yılı itibariyle Türkiye yazılımcı maaşları ne kadar?

csshtmlyazılım
Editor : Şerif SENCER
SİZİN DÜŞÜNCELERİNİZ?
TÜRKİYE GÜNDEMİ
BUNLAR DA İLGİNİZİ ÇEKEBİLİR
ÇOK OKUNAN HABERLER