How to Center an Unordered List of Unknown Width?

Centering an Unordered List of Unknown Width

In web design, it's often desirable to horizontally center a list of links, such as those found in footers. While aligning text is straightforward, centering an unordered list without specifying its width can be tricky.

Question:

How do you horizontally center an unordered list of unknown width, where list items should be displayed side-by-side, not one below the other?

Answer:

Option 1: Inline Display

If list items can be set to display: inline, the solution is simple:

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

#footer ul {
  list-style: none;
}

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

Option 2: Block Display with Positioning

If display: block must be used for list items, consider the following CSS:

<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>

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