CSS'de margin 0 auto ile yatayda ortalama

By Admin
25/Nisan/2021
Okuma Süresi: 3 dk.

Merhaba yazılımcı yoldaşlar,

Az önce başlıkta belirttiğim konuyla ilgili küçük bir detay farkettim. Bir görseli yatayda ortalamaya çalışırken margin: 0 auto; verdim ama ortalamıyorudu. Çünkü img etiketi default değeri inline seviyede bir element. Onu display: block; diyerek önce block'a çevirdim sonra margin: 0 auto ; verince gayet güzel çalıştı. Demek ki margin: 0 auto; sadece block seviyesinde işe yarıyor. İnline elementler olan span, img veya a gibi elementlerde yaramıyor.

Çünkü zaten ortalayacağı bi alan bulamıyor. Block'da ise elementi zaten satır boyunca varmış kabul ettiği için satır genişliği neyse orada ortalama yapıyor. Şu aşağıdaki görsel üzerinde inceleyelim;

Kutucukların üzerinde ne yazıyorsa o css özelliği uygulanmış. Mesela inline yazanlarda display: inline; uygulanmış ve gördüğünüz üzere sadece "inline" yazısını sarmış. block yazanda ise satır boyunca bir yer kaplama durumu var. İşte siz inline yazan yerde margin: 0 auto; verirseniz zaten "inline" yazısı kadar yer kapladığı için sağında solunda bir boşluk bulamıyor ortalanacak. Blockta ise görüldüğü üzere sağ tarafında epey bir boşluk bulunmakta. Haliyle margin: 0 auto; dediğiniz anda "block" yazısını ortalayacaktır.

Sevgiler Saygılar...


ETİKETLER: CSS
Css'de birden fazla media elementini aynı anda AND ile kullanmak
CKeditor'de Türkçe Karakter Sorunu