CSS AdvancedLesson 64Preview gratis
CSS Image Centering
Lesson ini bagian dari CSS · Semua level
Ringkasan
Memusatkan gambar bisa dilakukan dengan beberapa pendekatan sesuai konteks tata letak. Cara klasik adalah membuat gambar berstatus block lalu memberi margin otomatis di kiri dan kanan. Untuk kasus yang lebih fleksibel, Flexbox dan CSS Grid bisa memusatkan gambar sekaligus konten lain hanya dengan satu atau dua baris.
Poin kunci
- Gambar perlu `display: block` agar `margin: auto` bisa memusatkan secara horizontal
- `justify-content: center` dan `align-items: center` pada wadah flex memusatkan kedua sumbu
- `place-items: center` pada grid memusatkan isi sel dengan cepat
- Posisi absolut di tengah layar dicapai dengan `top/left 50%` lalu `translate(-50%, -50%)`
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.