MoreLesson 241Preview gratis
Center Button in DIV
Lesson ini bagian dari How To · Semua level
Ringkasan
Tombol dapat dipusatkan di dalam div dengan cara yang berbeda tergantung layout-nya. Jika tombol adalah inline-block, text-align: center pada parent sudah cukup. Untuk kontrol yang lebih lengkap, gunakan flexbox, sedangkan margin: 0 auto hanya bekerja pada elemen block yang memiliki lebar.
Poin kunci
- Button secara default bersifat inline-block, sehingga text-align: center pada parent memusatkannya.
- Flexbox dengan justify-content: center memusatkan tombol secara horizontal; align-items: center untuk vertikal.
- margin: 0 auto memusatkan elemen block yang memiliki width, bukan inline-block tanpa lebar.
- Jika memakai position: absolute, kombinasikan left: 50% dengan translateX(-50%).
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.