Duyarlı bir web sitesi, görüntülendiği ekran boyutunu ve cihaz boyutlarını uyarlayabilir. Web sitesinin responsive olmasının yanı sıra görsellerin ve metinlerin de uyumlu ve responsive olması gerekmektedir. Hizalanmış resimler, metni etraflarına saran resimlerdir. Hizalanmış metin ise tam bir paragrafa benzeyen metindir.
Bu makale, görüntüleri ve metni duyarlı bir şekilde hizalama yöntemini inceleyecektir.
Görüntüleri ve Metni Duyarlı Şekilde Nasıl Hizalayabilirim?
Resimler ve metinler de dahil olmak üzere içerik, Bootstrap kullanılarak duyarlı bir şekilde hizalanabilir. Gösteriyi sağlamak için iki örnek listeledik:
Örnek 1: Metni Dikey ve Görüntüyü Yatay Olarak Ortaya Hizalayın
Öncelikle görüntüyü yatay olarak ve metni dikey olarak ortalamayı deneyin. Bu amaçla aşağıda verilen talimatları izleyin:
Adım 1: Bir HTML Yapısı Oluşturun
Bir HTML yapısı oluştururken öncelikle “ Önyükleme ” ve ayrıca harici CSS dosyası. Bundan sonra bir oluşturun 2. Adım: CSS'yi uygulayın Konteynerde: Açık Metin üzerinde: Metnin dikey olarak ortalandığı ve görüntünün yatay olarak ortalandığı gözlemlenebilir: Örnek 2: Metni ve Duyarlı Görüntüyü Sola Hizala Verilen örnekte resim ve metin sola hizalanacaktır. Bu amaçla aşağıdaki adım adım talimatları izleyin: Adım 1: Bir HTML Yapısı Oluşturun Örnekte kullanılan HTML kodu yukarıdakiyle aynıdır. 2. Adım: CSS'yi uygulayın Konteynerde: Açık Metin üzerinde: Çıktı, metin ve görselin sola hizalandığını doğrular: Görüntüleri ve metni duyarlı bir şekilde hizalamak için öncelikle CSS'de bir ızgara veya esnek düzen oluşturun, ardından ' hizalama öğesi ” özellik değerini “ merkez ”. Bunu yapmak, görüntüleri ve metni CSS'de duyarlı bir şekilde hizalayacaktır. Bu yazı, kullanıcılara görselleri ve metni duyarlı bir şekilde hizalamaları için eksiksiz bir kılavuz sağlamıştır. etiket ve metin:
< vücut >
< div sınıf = 'konteyner' >
< img kaynağı = 'test-görüntü.jpg' her şey = 'Resim denemesi' >
< div sınıfı = 'metin' > Bu bir metin. div >
div >
vücut >
:
.konteyner {
görüntülemek: esnek ;
metin hizalama: ortala;
yasla-içerik: merkez;
hizalama öğeleri: merkez;
}
img {
maksimum genişlik: 100 % ;
yükseklik: otomatik;
}
.metin {
yazı tipi boyutu: 16 piksel;
maksimum genişlik: 390 piksel;
}
:
.konteyner {
görüntülemek: esnek ;
esnek yön: sütun;
hizalama öğeleri: esnek başlangıç;
metin hizalama: sol;
}
img {
maksimum genişlik: 100 % ;
yükseklik: otomatik;
}
.metin {
yazı tipi boyutu: 16 piksel;
maksimum genişlik: 390 piksel;
}
Çözüm