MoreLesson 242Preview gratis
Center a List
Lesson ini bagian dari How To · Semua level
Ringkasan
Daftar <ul> secara default memenuhi lebar parent, sehingga teksnya terlihat rata kiri meski isinya pendek. Untuk memusatkan seluruh blok daftar, ubah daftar menjadi inline-block atau gunakan flexbox pada parent. Jika hanya teks di dalam item yang ingin dipusatkan, atur text-align pada elemen daftar.
Poin kunci
- text-align: center pada <ul> hanya memusatkan konten inline, bukan kotak daftar itu sendiri.
- display: inline-block pada <ul> bersama text-align: center pada parent memusatkan kotak daftar.
- Flexbox pada parent dengan justify-content: center juga dapat memusatkan daftar.
- Gunakan list-style-position: inside atau padding-left untuk mengatur posisi marker.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.