How Do I Center an Unordered List Inside a Fixed-Width Div Using CSS?

Web Design: Centering an Unordered List Within a Fixed-Width Div

When working with HTML elements, it's common to require specific alignment and sizing. A typical scenario involves centering an unordered list (

) within a container with defined width. To achieve this layout, we can leverage the power of CSS:

Solution:

To center the

, along with individually centering its
• elements, while ensuring dynamic width adjustment, implement the following strategy:

  .wrapper {
      text-align: center;
  }
  
  .wrapper ul {
      display: inline-block;
      margin: 0;
      padding: 0;
      /* Ensure compatibility with older versions of Internet Explorer */
      zoom: 1;
      *display: inline;
  }
  
  .wrapper li {
      float: left;
      padding: 2px 5px;
      border: 1px solid black;
  }

  Explanation:

  1. The .wrapper class centers the entire list container using text-align: center;.
  2. The nested .wrapper ul employs display: inline-block;, allowing the
     to occupy only the necessary space while retaining inline properties. It also removes default margins and padding for proper spacing.
     • For older versions of Internet Explorer, zoom: 1; ensures cross-browser compatibility.
     • *display: inline; applies the inline-block behavior to Internet Explorer 6 and below.
     • Each
     • element is centered within the
       by setting float: left;. Individual padding and border are added to enhance visual appeal.

  Implementation:

  <div class="wrapper">
      <ul>
          <li>Three</li>
          <li>Blind</li>
          <li>Mice</li>
      </ul>
  </div>

  Note: This solution provides maximum width flexibility for the

  as its width adjusts dynamically to the content within.

  Update:

  For a hands-on demonstration, visit the jsFiddle link provided in the reference material.

  The above is the detailed content of How Do I Center an Unordered List Inside a Fixed-Width Div Using CSS?. For more information, please follow other related articles on the PHP Chinese website!