Situs web responsif dapat menyesuaikan ukuran layar dan dimensi perangkat yang digunakan untuk melihatnya. Selain daya tanggap situs web, gambar dan teks juga harus selaras dan responsif. Gambar yang disejajarkan adalah gambar yang membungkus teks di sekelilingnya. Sedangkan teks rata adalah teks yang terlihat seperti satu paragraf utuh.
Artikel ini akan membahas metode untuk menyelaraskan gambar dan teks secara responsif.
Bagaimana Menyelaraskan Gambar dan Teks Secara Responsif?
Konten termasuk gambar dan teks dapat diselaraskan secara responsif dengan menggunakan Bootstrap. Untuk memberikan demonstrasi, kami telah mencantumkan dua contoh:
- Ratakan tengah teks secara vertikal dan gambar secara horizontal.
- Ratakan kiri teks dan gambar responsif.
Contoh 1: Ratakan Tengah Teks Secara Vertikal dan Gambar Secara Horizontal
Pertama, coba posisikan gambar secara horizontal dan teks secara vertikal. Untuk tujuan itu, ikuti petunjuk yang diberikan di bawah ini:
Langkah 1: Buat Struktur HTML
Saat membuat struktur HTML, pertama-tama, tautkan “ tali sepatu ” dan juga file CSS eksternal. Setelah itu, buat a Langkah 2: Terapkan CSS Pada wadah: Pada Pada teks: Dapat diamati bahwa teks berada di tengah secara vertikal, dan gambar berada di tengah secara horizontal: Contoh 2: Ratakan Kiri Teks dan Gambar Responsif Dalam contoh yang diberikan ini, gambar dan teks akan rata kiri. Untuk tujuan itu, ikuti petunjuk langkah demi langkah di bawah ini: Langkah 1: Buat Struktur HTML Kode HTMLnya sama seperti di atas, yang digunakan pada contoh. Langkah 2: Terapkan CSS Pada wadah: Pada Pada teks: Outputnya mengonfirmasi bahwa teks dan gambar rata kiri: Untuk menyelaraskan gambar dan teks secara responsif, pertama-tama buat tata letak kisi atau fleksibel di CSS, lalu atur “ menyelaraskan-item ” nilai properti ke “ tengah ”. Melakukannya akan menyelaraskan gambar dan teks secara responsif dalam CSS. Tulisan ini telah memberi pengguna panduan lengkap untuk menyelaraskan gambar dan teks secara responsif. tag dan teks:
< tubuh >
< div kelas = 'wadah' >
< img src = 'uji-gambar.jpg' semuanya = 'uji Gambar' >
< kelas div = 'teks' > Ini adalah beberapa teks. div >
div >
tubuh >
:
.wadah {
menampilkan: melenturkan ;
perataan teks: tengah;
justify-content: tengah;
menyelaraskan-item: tengah;
}
gambar {
lebar maksimal: 100 % ;
tinggi: otomatis;
}
.teks {
ukuran font: 16px;
lebar maksimal: 390 piksel;
}
:
.wadah {
menampilkan: melenturkan ;
arah fleksibel: kolom;
menyelaraskan-item: mulai fleksibel;
perataan teks: kiri;
}
gambar {
lebar maksimal: 100 % ;
tinggi: otomatis;
}
.teks {
ukuran font: 16px;
lebar maksimal: 390 piksel;
}
Kesimpulan