How to Center an Unordered List of Unknown Width Horizontally?

Centering an Unordered List of Unknown Width Horizontally

When creating a footer with a set of links represented as an unordered list, it is often desirable to center the list horizontally within the footer div. While it's straightforward to center text elements or elements with a known width, centering an unordered list of unknown width presents a challenge.

Inline List Items

If the list items can be displayed inline, the solution is simple:

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

Block List Items

However, in certain cases, it may be necessary to use display: block; on the list items. In this case, a slightly more complex solution 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 CSS positions the unordered list at the center of the footer div and offsets the list items so that they align horizontally within the list.

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