How to horizontally center an unordered list of unknown width?

Question

Usually there is a set of links in the footer presented in the list, for example:

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

I want everyone in the footer of the div # to be horizontal. If it were a paragraph, you would simply say: p { text-align: center; } p { text-align: center; } . Or, if I knew the width of <ul> , I could just say #footer ul { width: 400px; margin: 0 auto; } #footer ul { width: 400px; margin: 0 auto; } #footer ul { width: 400px; margin: 0 auto; } .

But how do you center unordered list items without setting a fixed width to <ul> ?

EDIT: clarification - list items should be next to each other, and not below.

Answer 1

The solution, if your list items can be display: inline , is pretty simple:

 #footer { text-align: center; } #footer ul { list-style: none; } #footer ul li { display: inline; } 

However, many times you have to use display:block on your <li> s. The following CSS will work in this case:

 #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%; } 

Answer 2

Use the css below to solve the problem.

 #footer{ text-align:center; height:58px;} #footer ul { font-size:11px;} #footer ul li {display:inline-block;} 

Note Do not use float:left in li. this will make your align left.

Answer 3

Another solution:

 #footer { display:table; margin:0 auto; } #footer li { display:table-cell; padding: 0px 10px; } 

Then ul does not go to the next line if the text is scaled.

Answer 4

It depends on whether you have list items below the previous one or to the right of the previous one, i.e.:

 Home About Contact 

or

 Home | About | Contact 

The first thing you can do with:

 #wrapper { width:600px; background: yellow; margin: 0 auto; } #footer ul { text-align: center; list-style-type: none; } 

The second can be performed as follows:

 #wrapper { width:600px; background: yellow; margin: 0 auto; } #footer ul { text-align: center; list-style-type: none; } #footer li { display: inline; } #footer a { padding: 2px 12px; background: orange; text-decoration: none; } #footer a:hover { background: green; color: yellow; } 

Answer 5

Try wrapping the list in a div and giving that div an inline property instead of your list.

Answer 6

Philfreo's answer is great, it works great (cross browser, with IE 7+). Just add my exp for the anchor tag inside li.

 #footer ul li { display: inline; } #footer ul li a { padding: 2px 4px; } /* no display: block here */ #footer ul li { position: relative; float: left; display: block; right: 50%; } #footer ul li a {display: block; left: 0; }