css - 如何居中 ul 菜单？

Question

我有这个 ul 菜单:

<ul id="superfish-1">
  <li class="active-trail"><a href="#" class="sf-depth-1  active">Inicio</a></li>
  <li class="trail"><a href="#" class="sf-depth-1">Quienes somos</a></li>
  <li class="trail"><a href="#" class="sf-depth-1">Contacto</a></li>

</ul>

我需要水平对齐它。

我看到了这个question但是将 ul 定位为 postion:relative; 并设置 left:50% 并没有成功。

我也找到了这个question但在我的例子中，我无法手动设置宽度，因为菜单动态加载其内容，然后宽度一直在变化。

这是我需要的:

Answer 1

这样写:

    #superfish-1{
     text-align:center;
    }
    li{
     display:inline-block;
     *display:inline;/*For IE7*/
     *zoom:1;/*For IE7*/
    }

检查这个http://jsfiddle.net/SdkKd/