如何在 WordPress 中将 superfish 菜单居中（在 IE7 中）

Question

我有一个 WordPress 博客，其中的菜单我想设计为 superfish 下拉菜单，我遵循了本教程： http://kav.in/wordpress-superfish-dropdown-menu

到目前为止，菜单看起来很棒，但我需要它居中而不是左对齐。这是我的代码：

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
}
.sf-menu {
    float:              left;
    width:              100%;
    text-align:center;
}
.sf-menu li {
    background:         transparent;
}
.sf-menu a {
    padding:            0px 15px;
    text-decoration:    none;
    line-height:        40px;
}
.sf-menu ul li a {
    padding:            0px 15px;
    text-decoration:    none;
}
.sf-menu li li {
    background:         #611718;
    text-align: left;
}

我的菜单中的项目当然具有可变宽度。

我没有没有所有 sf 类的 html，但它是一个简单的列表，或多或少像这样：

 <div id="navwrap">

    <ul class="sf-menu">

    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a>
        <ul>
            <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        </ul>
    </li>
   </ul>
 </div>

编辑：我找到了一种将其居中的方法，但它在 IE7 中不起作用。

好吧，我尝试了一种在谷歌上搜索的方法，它似乎有效，直到我检查了 IE7，看起来 inline-block 使菜单完全中断：

#navwrap .sf-menu {
   text-align: center;
}
#navwrap .sf-menu li {
   display: inline-block; 
   float: none;
}
#navwrap .sf-menu li a {
   display: inline-block;
}

这是我正在处理的页面： http://hermandaddelcalvario.org/wordpress/ 您可以在 IE7 损坏时检查顶部菜单。

Answer 1

IE7 不喜欢对原本是块级元素的元素进行 inline-block。
但是您没有在 li 上使用任何边距，那么为什么不使用 display: inline; 呢？我认为这不会有任何区别。

看来使用内联会使菜单消失。
删除 float: left; 似乎可以解决这个问题。

（无论如何，为什么菜单是浮动的？它似乎没有任何区别。）

Answer 2

你可以尝试这样的事情：

.wrapper{
    position: relative;
    left:     50%;
    width:    100%;

}

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
    position:           relative;
        left:           -25%;
}

并在 .wrapper 中添加#navwrap。
该列表不会真正居中，但实际上已经尽可能接近了。