- Bir Görüntüyü Div'de Yatay Olarak Nasıl Ortalarsınız?
- Marj Özelliği
- Flexbox Modülü
- Izgara Görünümü Düzeni
- Pozisyon Özelliği
Bir Görüntüyü Div'de Yatay Olarak Nasıl Ortalarsınız?
Geliştirici, bir görüntüyü div'de yatay olarak ortalamak için margin özelliğini, Flexbox modülünü, Izgara Görünümü düzenini ve Konum özelliğini kullanabilir. Görüntüyü div etiketinde yatay olarak ortalamak için aşağıdaki kılavuzu izleyin.
Diyelim ki, HTML dosyasında görüntünün bu şekilde yerleştirildiği bir div var:
< div sınıf = 'kök' >
< img kaynak = '../kitap.jpg' yükseklik = 'elli%' Genişlik = 'elli%' sınıf = 'resim' >
< / div >
Görüntünün genişliği ve yüksekliği %50 ve bir 'görüntü' sınıfı alıyor.
Kenar Boşluğu Özelliğini Kullanma
Kullanıcılar, margin özelliğini kullanarak HTML öğelerinin çevresine boşluk ekleyebilir. Pencere ekranını yeniden boyutlandırdıktan sonra mevcut alana göre bir kenar boşluğu atar. Örneğin, sol ve sağ kenar boşluğunu otomatik olarak ayarlar ve görüntüleme özelliği şunları engellemeye ayarlanır:
img {
Ekran bloğu;
sol kenar boşluğu: otomatik;
sağ kenar boşluğu: otomatik;
}
Yukarıdaki örneği çalıştırdıktan sonra, web sayfası şöyle görünür:
Yukarıdaki çıktı, görüntünün artık merkezde olduğunu gösterdi.
Flexbox Modülünü Kullanma
“ esnek kutu ”, tam bir özellik kümesi içeren bir modüldür. Bizim durumumuzda, kök öğe sınıfını seçin ve flex'i display özelliğinin bir değeri olarak kullanın. Merkezi “ için bir değer olarak ayarla haklı içerik ' Ve ' hizalama öğeleri ' özellikler:
.kök {ekran: esnek;
savunmak- içerik : merkez;
hizalama öğeleri: merkez;
arka plan- renk : mavi;
}
Kodu çalıştırdıktan sonra web sayfası şöyle görünür:
Yukarıdaki çıktı, görüntünün div'in ortasında, arka plan renginin 'mavi' olarak ayarlanmış olarak görüntülendiğini gösterir.
Izgara Görünümü Düzen Modülünü Kullanma
Izgara görünümü düzeninde 12 sütun vardır ve toplam genişlik %100 olarak ayarlanmıştır ve her öğeyi web sayfasında belirli bir konuma yerleştirir:
.kök {ekran: ızgara;
yer öğeleri: merkez;
}
Yukarıdaki kod parçacığında, display özelliğine “grid” değeri atanmıştır. “place-item”, “justify-content” ve “align-items” özelliklerinin kısaltması olarak kullanılırken:
Çıktı, ızgara yöntemini kullanarak görüntünün div'in merkezinde olduğunu doğrular:
Konum Niteliğini Kullanma
Kök sınıfın konumunu göreli değere ve görüntü sınıfının konumunu mutlak değere ayarlayarak. Görüntü, div'in merkezinde görüntülenebilir:
.kök {konum: göreli;
}
.resim {
Genişlik : 700 piksel;
yükseklik : 500 piksel;
pozisyon: mutlak;
sol: elli %;
dönüştür: çeviriX ( - elli % ) ;
}
Görüntü '%50'nin soluna taşınır ve ardından X ekseninde tekrar '-%50'ye dönüşür. Görüntüyü div'in ortasında yatay olarak görüntüler:
Bu, görüntünün div'de yatay olarak ortalanabilmesidir.
Çözüm
Görüntüyü bir div öğesinde yatay olarak ayarlamak için ' marj ”, “ esnek modül ”, “ ızgara düzeni ' Ve ' konum ' özellikler. “ marj ” left and right özelliği auto olarak ayarlanmıştır. 'Esnek modül' ve 'ızgara Düzeni', ekranı sırasıyla esnetmeye ve ızgaraya ayarlar ve ' öğeyi yerleştir ' görüntüyü ortalama özelliği. Konum özelliği, değeri kök sınıfa göre ve görüntü sınıfına göre mutlak olarak ayarlar ve 'left' ve 'transform' özelliklerini kullanır. Bu blog, görüntülerin bir div'de yatay olarak nasıl ortalanacağını başarıyla gösterdi.