How to Horizontally Center an Unordered List with Unknown Width?

Horizontally Centering an Unordered List of Unknown Width

In website footers, it's common to have a list of links centered horizontally. While centering a fixed-width list is straightforward, centering a list of unknown width poses a challenge. This article explores a solution for this scenario.

The Problem

Consider the following HTML code:

<code class="HTML"><div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div></code>

We want the entire content within the #footer div to be horizontally centered. Setting text-align: center on the paragraph tag would work, but it's inapplicable here since the list items should be side by side, not underneath each other.

Solutions

Solution for Lists with Inline Items:

If the list items can be displayed inline, the following CSS will suffice:

<code class="CSS">#footer {
    text-align: center;
}

#footer ul {
    list-style: none;
}

#footer ul li {
    display: inline;
}</code>

Solution for Lists with Block Items:

If the list items must have display: block, a more complex CSS is required:

<code class="CSS">#footer {
    width: 100%;
    overflow: hidden;
}

#footer ul {
    list-style: none;
    position: relative;
    float: left;
    display: block;
    left: 50%;
}

#footer ul li {
    position: relative;
    float: left;
    display: block;
    right: 50%;
}</code>

This solution utilizes the float and left and right properties to adjust the positions of the list and its items accordingly, ensuring horizontal centering regardless of the unknown width of the list.

The above is the detailed content of How to Horizontally Center an Unordered List with Unknown Width?. For more information, please follow other related articles on the PHP Chinese website!