- Bagaimana untuk Memusatkan Imej dalam Div Secara Mendatar?
- Harta Margin
- Modul Flexbox
- Tata Letak Pandangan Grid
- Atribut Kedudukan
Bagaimana untuk Memusatkan Imej dalam Div Secara Mendatar?
Pembangun boleh menggunakan sifat margin, modul Flexbox, susun atur Grid View dan atribut Position untuk memusatkan imej dalam div secara mendatar. Ikuti panduan di bawah untuk menjajarkan imej secara mendatar di tengah dalam teg div.
Mari kita anggap, terdapat div di mana imej diletakkan dengan cara ini dalam fail HTML:
< div kelas = 'akar' >
< img src = '../book.jpg' ketinggian = 'lima puluh%' lebar = 'lima puluh%' kelas = 'gambar' >
< / div >
Imej semakin lebar dan tinggi 50% dan kelas 'imej'.
Menggunakan Harta Margin
Pengguna boleh menambah ruang di sekeliling elemen HTML menggunakan sifat margin. Ia memberikan margin mengikut ruang yang tersedia selepas mengubah saiz skrin tetingkap. Sebagai contoh, tetapkan margin-kiri dan kanan kepada auto, dan sifat paparan ditetapkan untuk menyekat:
img {
paparan: blok;
jidar-kiri: auto;
margin-kanan: auto;
}
Selepas melaksanakan contoh di atas, halaman web kelihatan seperti ini:
Output di atas telah memaparkan bahawa imej kini berada di tengah.
Menggunakan Modul Flexbox
' kotak lentur ” ialah modul yang mengandungi set lengkap sifat. Dalam kes kami, pilih kelas elemen akar dan gunakan flex sebagai nilai sifat paparan. Tetapkan pusat sebagai nilai untuk “ justify-content ” dan “ align-item ” sifat:
.akar {paparan: flex;
mewajarkan- kandungan : pusat;
align-item: tengah;
latar belakang- warna : biru;
}
Halaman web kelihatan seperti ini, selepas melaksanakan kod:
Output di atas menunjukkan bahawa imej dipaparkan di tengah-tengah div yang mempunyai warna latar belakang ditetapkan kepada 'biru'.
Menggunakan Modul Tata Letak Grid View
Reka letak paparan grid mempunyai 12 lajur dan jumlah lebar ditetapkan kepada 100% dan ia meletakkan setiap elemen pada kedudukan tertentu pada halaman web:
.akar {paparan: grid;
tempat-item: pusat;
}
Dalam coretan kod di atas, nilai 'grid' diberikan kepada sifat paparan. Walaupun 'tempat-item' digunakan sebagai singkatan untuk sifat 'justify-content' dan 'align-item':
Output mengesahkan bahawa imej berada di tengah-tengah div menggunakan kaedah grid:
Menggunakan Atribut Kedudukan
Dengan menetapkan kedudukan kelas akar kepada nilai relatif dan kelas imej kepada nilai mutlak. Imej boleh dipaparkan di tengah-tengah div:
.akar {kedudukan: relatif;
}
.gambar {
lebar : 700px;
ketinggian : 500px;
jawatan: mutlak;
dibiarkan: lima puluh %;
mengubah: translateX ( - lima puluh % ) ;
}
Imej dialihkan ke kiri '50%' dan kemudian bertukar kembali kepada '-50%' pada paksi X. Ia memaparkan imej di tengah-tengah div secara mendatar:
Begitulah cara imej boleh dipusatkan dalam div secara mendatar.
Kesimpulan
Untuk menetapkan imej secara mendatar dalam elemen div, gunakan ' margin ”, “ modul lentur ”, “ susun atur grid ” dan “ kedudukan ” hartanah. ' margin ” harta kiri dan kanan ditetapkan kepada auto. 'Modul flex' dan 'Layout grid' menetapkan paparan kepada flex dan grid masing-masing dan gunakan ' letak barang “ harta untuk memusatkan imej. Sifat kedudukan menetapkan nilai relatif kepada kelas akar dan mutlak kepada kelas imej dan menggunakan sifat 'kiri' dan 'transformasi'. Blog ini telah berjaya menunjukkan cara untuk memusatkan imej dalam div secara mendatar.