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

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

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

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

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

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

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

Examples related to html

Examples related to css

Examples related to centering