How to Center an Unordered List Without Using Parent Divs?

Centering an Unordered List Without Parent Wrappers

This question addresses the challenge of centering an unordered list (

) without relying on a parent div element. The goal is to preserve left alignment within the list items (
• ).

  Solution:

  The following CSS code effectively centers the list while maintaining left alignment for the list items:

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

  Copy after login

  Explanation:

  Setting display: table transforms the list into a table, which allows it to fill the available width. The margin: 0 auto property auto-centers the table, and thus the list, on the page.

  Example:

  <code class="html"><ul>
    <li>56456456</li>
    <li>4564564564564649999999999999999999999999999996</li>
    <li>45645</li>
  </ul></code>

  Copy after login

  Conclusion:

  This solution addresses the need to center an unordered list without creating additional wrappers in the HTML. By utilizing the display: table and margin: 0 auto properties, it aligns the list horizontally in the center while retaining the left alignment of its items.

  The above is the detailed content of How to Center an Unordered List Without Using Parent Divs?. For more information, please follow other related articles on the PHP Chinese website!