How to horizontally center an unordered list of unknown width?

问题:

It is common to have a set of links in a footer represented in a list, such as:

     
Home
         
About
         
Contact
     
 

I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the

I could just say #footer ul { width: 400px; margin: 0 auto; }.

But how do you center the unordered list items without setting a fixed width on the

?

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

回答1:

The solution, if your list items can be display: inline is quite easy:

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

However, many times you must use display:block on your

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

回答2:

Use the below css to solve your issue

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

Note: Don't use float:left in li. it will make your li to align left.

回答3:

One more solution:

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

Then ul doesn't jump to the next line in case of zooming text.

回答4:

It depends on if you mean the list items are below the previous or to the right of the previous, ie:

Home About Contact 

or

Home | About | Contact 

The first one you can do simply with:

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

The second could be done like this:

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

回答5:

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

回答6:

The answer of philfreo is great, it works perfectly (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; }  

文章来源: How to horizontally center an unordered list of unknown width?