Can't get list to center when using UL

Question

I have several

items centered and displaying inline within

tags, but I cannot seem to get the
itself to c

Answer 1

<ul> elements have a default padding-left of 40px. Remove it with padding: 0; or padding-left: 0;.

JSFiddle Example

You can use your browser's F12 developer tools to inspect elements and their margins or padding in the future.

Answer 2

Have a look at this example it centers horizontally the list where the menu items have no set width.
See here: http://www.cssplay.co.uk/menus/centered.html

The basic CSS you need:

footer {
  clear: both;
  float: left;
  overflow: hidden;
  width: 100%;
}
ul {
   float: left;
   left: 50%;
   list-style-type: none;
   margin: 0 auto;
   padding: 0;
   position: relative;
}
li {
  float: left;
  position: relative;
  right: 50%;
}

Note: I specifically removed the | separators between the LIs as this is not valid HTML. See the changed example: http://jsfiddle.net/eNQyp/1/ The separators are added as styles on the LIs. It can work your example using this technique and is valid HTML.