Why is my div element not centering?

I feel like I am missing something easy or stupid. This is the on开发者_StackOverflow中文版ly element on my page that I can't seem to center. I cannot seem to centerul#footer.

http://jsfiddle.net/w67rt/

To center the footer contents horizontally, just add the following CSS:

#footer {
  text-align: center;
}

Demo: http://jsfiddle.net/mathias/GZ6xh/

If you’re looking to center the entire element, just give it a width and then use margin: 0 auto:

#footer {
  width: 400px;
  margin: 0 auto;
}

The width of ul#footer is undefined, so it uses the default width of "100%". I tried using width:261px, and then it does center.

I find two solutions:

both here, one is commented: http://jsfiddle.net/AzNqm/

1. define width of ul, and center block with margin:auto
2. center inner li elements

Effect will be the same.