Di bawah ini kita akan mempelajari cara memusatkan gambar(Center Images) dengan CSS.
Center Images
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img { display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <h2>Center an Image</h2> <p >Untuk memusatkan gambar, setel margin kiri dan kanan ke otomatis, dan jadikan itu menjadi elemen blok.</p> <img src="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Chania" style="width:50%;"> </body> </html>
Cara Memusatkan Gambar
Langkah 1) Tambahkan HTML:
Contoh
<img src="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Chania" style="width:50%;">
Langkah 2) Tambahkan CSS:
Untuk memusatkan gambar, setel margin kiri dan kanan ke otomatis dan jadikan itu menjadi elemen blok:
Contoh
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}Perhatikan bahwa ini tidak dapat dipusatkan jika lebar disetel ke 100% (lebar penuh).
