- Bagaimana Memusatkan Gambar di Div Secara Horizontal?
- Properti Margin
- Modul Flexbox
- Tata Letak Tampilan Kisi
- Atribut Posisi
Bagaimana Memusatkan Gambar di Div Secara Horizontal?
Pengembang dapat memanfaatkan properti margin, modul Flexbox, tata letak Tampilan Kisi, dan atribut Posisi untuk memusatkan gambar di div secara horizontal. Ikuti panduan di bawah ini untuk meratakan tengah gambar secara horizontal di tag div.
Mari kita asumsikan, ada div di mana gambar ditempatkan dengan cara ini di file HTML:
< div kelas = 'akar' >
< img src = '../buku.jpg' tinggi = 'lima puluh%' lebar = 'lima puluh%' kelas = 'gambar' >
< / div >
Gambar mendapatkan lebar dan tinggi 50% dan kelas 'gambar'.
Menggunakan Properti Margin
Pengguna dapat menambahkan spasi di sekitar elemen HTML menggunakan properti margin. Ini memberikan margin sesuai dengan ruang yang tersedia setelah mengubah ukuran layar jendela. Misalnya, setel margin-kiri dan kanan ke otomatis, dan properti tampilan disetel ke blokir:
img {
tampilan: blok;
margin-kiri: otomatis;
margin-kanan: otomatis;
}
Setelah menjalankan contoh di atas, halaman web terlihat seperti ini:
Output di atas telah menunjukkan bahwa gambar sekarang berada di tengah.
Menggunakan Modul Flexbox
“ flexbox ” adalah modul yang berisi sekumpulan properti lengkap. Dalam kasus kami, pilih kelas elemen root dan gunakan flex sebagai nilai properti tampilan. Tetapkan pusat sebagai nilai untuk “ membenarkan-konten ' Dan ' menyelaraskan-item ” properti:
.akar {tampilan: fleksibel;
membenarkan- isi : tengah;
menyelaraskan-item: tengah;
latar belakang- warna : biru;
}
Halaman web terlihat seperti ini, setelah menjalankan kode:
Output di atas menunjukkan bahwa gambar ditampilkan di tengah div dengan warna latar belakang diatur ke 'biru'.
Menggunakan Modul Tata Letak Tampilan Grid
Tata letak tampilan kisi memiliki 12 kolom, dan lebar total diatur ke 100% dan menempatkan setiap elemen pada posisi tertentu di halaman web:
.akar {tampilan: kisi;
tempat-item: pusat;
}
Dalam cuplikan kode di atas, nilai 'kisi' ditetapkan ke properti tampilan. Sementara 'place-item' digunakan sebagai singkatan untuk properti 'justify-content' dan 'align-items':
Output mengautentikasi bahwa gambar berada di tengah div menggunakan metode grid:
Menggunakan Atribut Posisi
Dengan mengatur posisi kelas root ke nilai relatif dan kelas gambar ke nilai absolut. Gambar dapat ditampilkan di tengah div:
.akar {posisi: relatif;
}
.gambar {
lebar : 700px;
tinggi : 500px;
posisi: mutlak;
kiri: lima puluh %;
transformasi: translateX ( - lima puluh % ) ;
}
Gambar dipindahkan ke kiri '50%' dan kemudian diubah kembali menjadi '-50%' pada sumbu X. Ini menampilkan gambar di tengah div secara horizontal:
Begitulah cara gambar dapat dipusatkan di div secara horizontal.
Kesimpulan
Untuk mengatur gambar secara horizontal dalam elemen div, gunakan tombol “ batas ”, “ modul fleksibel ”, “ tata letak kisi ' Dan ' posisi ” properti. “ batas ” properti kiri dan kanan diatur ke otomatis. 'Modul fleksibel' dan 'Tata Letak kisi' mengatur tampilan masing-masing ke lentur dan kisi dan menggunakan tombol ' barang tempat “ properti untuk memusatkan gambar. Properti posisi mengatur nilai relatif ke kelas root dan absolut ke kelas gambar dan menggunakan properti 'kiri' dan 'transformasi'. Blog ini telah berhasil mendemonstrasikan cara memusatkan gambar dalam div secara horizontal.