noisiv 1
noisiv
Manwe Work 1
Manwe Work
Agora Metin2 1
Agora Metin2
Bvural41 1
Bvural41
onur akbaş 1
onur akbaş
IronTalonX 1
IronTalonX
D 1
delimuratt
berzahx 1
berzahx
PrimeAC 1
PrimeAC
DEVLOPER 1
DEVLOPER
ShadowFon 1
ShadowFon
mavzermete 1
mavzermete
Hikaye Ekle

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

  • Konuyu başlatan Konuyu başlatan ByMoDuS
  • Başlangıç tarihi Başlangıç tarihi
  • Cevaplar Cevaplar 2
  • Görüntüleme Görüntüleme 172

ByMoDuS

Fahri Üye
Fahri Üye
Katılım
30 Nis 2011
Konular
1,324
Mesajlar
5,827
Çözüm
20
Online süresi
6mo 6d
Reaksiyon Skoru
5,736
Altın Konu
235
Başarım Puanı
379
MmoLira
27,339
DevLira
27
Ticaret - 0%
0   0   0

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Geliştirme.jpg

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.
<center>
<img src="xyz.jpg">
</center>

Webcim.jpg
 
Paylaşım için teşekkürler.
 
Paylaşım için teşekkürler :)
 

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Geri
Üst