How to horizontally center an unordered list of unknown width

Question

It is common to have a set of links in a footer represented in a list  such as    lt div id  footer  gt       lt ul gt           lt li gt  lt a href     gt Home lt  a gt  lt  li gt           lt li gt  lt a href     gt About lt  a gt  lt  li gt           lt li gt  lt a href     gt Contact lt  a gt  lt  li gt       lt  ul gt   lt  div gt    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  lt ul gt  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  lt ul gt    EDIT  clarification - the list items should be next to each other  not below

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt li gt 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

User · Answer

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

User · Answer

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

[html] How to horizontally center an unordered list of unknown width?

Examples related to html

Examples related to css

Examples related to centering