Last Updated on February 8, 2021 by Roshan Parihar
In this tutorial, learn how to center align unordered list inside div using HTML and CSS. The short answer is: use CSS text-align property to align list center position in HTML.
The center alignment places the list in the middle of the div element horizontally. You can use this to center align your website menus horizontally.
Let’s find out the method with the example given below.
How to Center Align Unordered List inside Div Using CSS
The above example contains the unordered list items that display as inline using the CSS property display: inline. After that, it placed inside the <div> element and applies the CSS property text-align: center to the div that align the list to the center position as given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div.myDivElement{ text-align:center; } div.myDivElement ul li{ display:inline; } </style> <div class="myDivElement"> <ul> <li>Home</li> <li>About</li> <li>Gallery</li> <li>Contact</li> </ul> </div> |
Output
- Home
- About
- Gallery
- Contact
The above example shows the center-aligned HTML list that looks like the menu items placed horizontally center position. You can unordered list or the ordered list items and use the above method to move them to the middle of the <div>.
You May Also Like to Read