Görüntüler CSS ile Nasıl Ortalanır

CSS kullanarak bir görüntüyü ortalamak mı istiyorsunuz? Hizalama sorunları genellikle web tasarımcıları için bir hayal kırıklığı kaynağıdır. Neyse ki, bir görüntüyü CSS ile ortalamak gerçekten basittir ve size bunu birkaç adımda nasıl yapacağınızı göstereceğiz.

Birçok web tasarım görevinde olduğu gibi, bunu yapmanın birden fazla yolu var! Bu makalede üç ana yöntemi ele alacağız. Başlayalım!

1. Kenar boşluğu özelliğini kullanın

ayarlamak marj özellik, bir görüntüyü CSS kullanarak yatay olarak ortalamanın en kolay yollarından biridir. Kenar boşlukları, CSS kutu modeli.

İ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 bir değer vererek kolayca başarabilirsiniz.

Oto:

img.center {
 Ekran bloğu;
 sol kenar boşluğu: otomatik;
 sağ kenar boşluğu: otomatik;
 genişlik: 800 piksel;
}

2. Flexbox Düzenini Kullan

Bu yöntem, görüntünün blok düzeyinde bir öğeye, genellikle bir 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, Görüntüle değeri olarak ayarlanmış özellik esnek. Ayrıca HTML'deki öğeleri hizalamak için esnek kullanın. Div'inize ekleyeceğiniz ikinci özellik haklı içerik, değeri olarak ayarlanmış merkez şöyle:

div.center {
 ekran: esnek;
 haklı içerik: merkez;
}

3. Kullanımdan kaldırılmış merkez Öğesini kullanın

Web en iyi uygulamaları, stil için CSS'yi ve anlambilim için HTML'yi kullanmanızı teşvik eder, bu nedenle bu HTML yöntemini kullanmamalısınız. bu merkez içeriğini yatay olarak ortalayan 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. basitçe sarın resim şöyle bir orta etikette etiketleyin:

Resimlerinizi HTML'de Bu Şekilde Hizalayacaksınız

Resimlerinizi bir HTML belgesinde ortalamanın üç farklı, kullanımı kolay yöntemini gösterdik. Hepsini deneyin ve sizin için en uygun olanı seçin. Kesinlikle başka seçeneğiniz yoksa üçüncü yöntemden kaçının!

Akılda tutulması gereken bir şey, HTML ve CSS kullanarak görüntüleri ortalamanın birkaç yolu daha olduğudur. Hem metin hem de satır içi görüntüler için çalışan yaygın bir yöntem, Metin hizalama Emlak.

Web Sayfanızdaki Metni CSS ile Nasıl Ortalayabilirsiniz?

Sonrakini Oku

Yazar hakkında