Learn how to center align unordered list inside div using HTML and CSS. Center alignment place the list in the middle of the div element horizontally. You can use this to center align you website menus horizontally.

To center align unordered list, you can use the CSS text align property with center as the value of this CSS property. This align the unordered list element horizontally center of the screen or div element. You may also like how to center align image inside div using HTML and CSS.

How to Center Align Unordered List inside Div Using CSS

The below example contains the list items with four item inside the unordered. To center align the list items, you need to put the list inside the div element. After that, give a class name to the div element. Now, use the CSS property text-align:center inside your style.

Now, check the output of the applies CSS in your browser.


  • Home
  • About
  • Gallery
  • Contact

The above example contains the list items you can use as a menu items of your website. These items are places inside the div element. The applied CSS property text align makes the inner element which is unordered list to the middle of the div.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.