Центрирование левого меню с неузнаваемой шириной

Question

Я хочу, чтобы Ли Элемент моего меню находился в Центре, я пробовал много методов, но это не происходит. Посмотрите на мою CSS:

#menu { 
    float: left; 
    width: 767px; 
    height: 38px; 
    margin: 11px 0 0 14px; 
    background: url(images/menubg.gif) repeat-x; 
    -webkit-border-radius: 0px 0px 7px 7px; 
    border-radius: 0px 0px 7px 7px; 
    border: 1px solid #efeff1; 
} 
    #menu ul { 
     list-style: none; 
     text-align: center; 
     padding: 0; 
     margin: 0; 
     height: 40px; 
    } 
     #menu ul li { 
      float: left; 
      color: #767676; 
      height: 18px; 
      padding: 11px 0px 11px 0px; 
      display: inline; 
     } 
      #menu ul li a { 
       font-family: Arial, Helvetica, sans-serif; 
       color: inherit; 
       font-size: 12px; 
       text-decoration: none; 
       font-weight: bold; 
       display: block; 
       padding: 0px 23px 2px 23px; 
       border-left: 1px solid #e0e0e2; 
      } 

Я пытался дисплей: встроенный, текст-Aling: центр, но он не получает права. Большое спасибо в Advance.

Answer 1

я удалил float и добавил inline-block вместо:

http://jsfiddle.net/dtTdg/1/

#menu ul li { 
    display: inline-block;