How to Center an Unordered List Without a Parent DIV

In CSS, centering an unordered list (

) while maintaining left-aligned list items can be challenging without using a parent div. Here's how to achieve this effect:

The provided code snippet, with a parent div, uses text-align: center on the div and display: inline-block on the ul to center the list. However, this method requires a parent div wrapper.

To center an unordered list without a parent div, CSS properties like margin and text-align cannot be used effectively since the

doesn't have a fixed width.

The solution lies in setting the

to behave like a table using display: table. This creates a table-like structure where rows are defined by list items (
• ). By setting margin: 0 auto on the
  , the table (i.e., the list) is centered within its containing element.

  Here's the CSS code that achieves this effect:

  ul {
    display: table;
    margin: 0 auto;
  }

  To demonstrate, here's a code snippet that uses the provided HTML but without a parent div:

  
  
  
    
  56456456
      
  4564564564564649999999999999999999999999999996
      
  45645
    

  This code will center the unordered list on the page, while still keeping the list items left aligned.