Altın Konu CSS İLE GÖRÜNTÜLERİ ORTALAMA

ByMoDuS · 21 Nis 2022

CSS İLE GÖRÜNTÜLERİ ORTALAMA

Kenar boşluğu özelliğini ayarlamak, CSS kullanarak bir görüntüyü yatay olarak ortalamanın en kolay yollarından biridir. Kenar boşlukları, CSS kutu modelinin temel bir bileşenidir.

İlk olarak, görüntü öğesini satır içi öğeden blok öğeye dönüştürmeniz gerekir. Blok düzeyinde HTML öğeleri, üst öğelerinin tam genişliğini kaplar ve bir sayfanın tüm genişliğini kaplayabilir.

Bir görüntü öğesini bir blok öğesi yaparak, yatay kenar boşluklarını ayarlayarak konumunu değiştirebilirsiniz. Ayrıca görüntünün sayfada ne kadar yer kapladığını belirlemek için görüntü için belirli bir genişlik ayarlamanız gerekir.

Hangi genişliği seçerseniz seçin, görüntünün sol ve sağ kenar boşluklarının eşit olması gerekir. Bunu, margin özelliğine auto değerini vererek kolayca başarabilirsiniz.

img.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
}

Flexbox Düzenini Kullanın

Bu yöntem, görüntünün blok düzeyinde bir öğeye, genellikle bir div öğesine yerleştirilmesini gerektirir.

<div class="center">
<img src="xyz.jpg">
</div>

Bunu yaptıktan sonra, görünümünü değiştirmek için bazı özellikler ekleyebilirsiniz. İki CSS özelliği kullanacaksınız.

Birincisi, değeri flex olarak ayarlanmış olan display özelliğidir. HTML'deki öğeleri hizalamak için flex'i de kullanabilirsiniz.

Div'inize ekleyeceğiniz ikinci özellik , değeri şu şekilde ortalanacak şekilde ayarlanmış şekilde justify -content :

div.center {
display: flex;
justify-content: center;
}

Kullanımdan Kaldırılan Merkez Öğesini Kullanın

Web en iyi uygulamaları, stil için CSS ve anlambilim için HTML kullanmanızı teşvik eder, bu nedenle bu HTML yöntemini kullanmamalısınız.

İçeriğini yatay olarak ortalayan center etiketi HTML5'te kullanımdan kaldırılmıştır.

Ancak yapmanız gerekiyorsa, yalnızca HTML kullanarak bir görüntüyü nasıl ortalayacağınız aşağıda açıklanmıştır.

img etiketini aşağıdaki gibi bir orta etikete sarmanız yeterlidir.