MoreLesson 242Free preview

Center a List

This lesson is part of How To · All levels

Summary

The <ul> list by default fills the parent width, so the text appears flat on the left even though it is short. To centralize the entire list block, convert the list to inline-block or use the flexbox on parent. If only text in the item is to be centered, set the text-alignments to the list element.

Key points

Text-align: center on <ul> only centers on inline content, not the list box itself.
Display: inline-block on <ul> with text-align: center on parent centering the list box.
Flexbox on parent with justify-content: center can also center the list.
Use list-style-position: inside or padding-left to set the position of the marker.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.