Css 中央ul精灵导航

我使用以下CSS在WordPress中创建了一个精灵图像菜单：

/* 04 Microsites Navigation */
.micrositescontainer {
    background: url('img/microsites_main_bkg.jpg');
}

.micrositestopnav ul {
    display: block;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    padding-left: 20%;
}

.micrositestopnav .horizontal-menu ul li {
    border-color: #FFFFFF;
    border-left: 0px solid #FFFFFF;
    float: left;
    padding: 0px 0 0 0;
}

/* Microsites Menu Items Start Here]*/
.micrositestopnav .menu-item-8449 a {
    background-image: url("img/micrositestopnav.png");
    background-position: 0 0;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8449.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8449.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: 0 -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8449 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8449 > a, .micrositestopnav li.current_page_item.menu-item-8449 > a, .micrositestopnav li.current_page_ancestor.menu-item-8449 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: 0 -125px;
}

.micrositestopnav .menu-item-8453 a {
    background-image: url("img/micrositestopnav.png");
    background-position: -200px 0px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8453.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8453.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: -200px -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8453 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8453 > a, .micrositestopnav li.current_page_item.menu-item-8453 > a, .micrositestopnav li.current_page_ancestor.menu-item-8453 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: -200px -125px;
}

.micrositestopnav .menu-item-8456 a {
    background-image: url("img/micrositestopnav.png");
    background-position: -400px 0;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8456.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8456.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: -400px -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8456 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8450 > a, .micrositestopnav li.current_page_item.menu-item-8456 > a, .micrositestopnav li.current_page_ancestor.menu-item-8456 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: -400px -125px;
}

.micrositestopnav .menu-item-8481 a {
    background-image: url("img/micrositestopnav.png");
    background-position: -600px 0;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8481.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8481.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: -600px -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8481 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8481 > a, .micrositestopnav li.current_page_item.menu-item-8481 > a, .micrositestopnav li.current_page_ancestor.menu-item-8481 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: -600px -125px;
}
/* Microsites Menu Items End Here]*/
/* 04 Microsites Navigation End */

菜单工作得很好，但前几天在Chrome Linux上查看站点时，我注意到sprite图像的水平布局没有在同一区域中对齐。我认为使用以下代码（左填充：20%）会导致此问题：

.micrositestopnav ul {
    display: block;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    padding-left: 20% ;
}

我想我想把雪碧菜单放在中央的愿望是通过应用上面这个快速解决方案来实现的。我想知道一个更有经验的程序员是如何在这个领域发挥作用的

你可以在这里看到正在使用的菜单。目前我无法上传图片，因为我刚刚加入了这个网站，但是请注意，sprite菜单位于beta网站的顶部标题区域。右边的第四个图像被强制下放到Chrome中的下一行。对我来说，它在Firefox28.0中显示良好

---

谢谢您的时间和考虑。

这可能是可能的解决方案

删除.horizontal菜单的float属性并更新相应CSS中的以下属性

.horizontal-menu {
    text-align:center
}

.micrositestopnav ul{
    margin:0 auto;
}

现在我可以用上述方法看到4个Li，即使你增加或减少Li的数量，它仍然会对齐中心

---

请同时登录其他浏览器，希望这能有所帮助。

您应该将所有代码放入带有ctrl+k或四个缩进空格的代码块：）目前显示的代码很难阅读。谢谢sabithpocker。从现在起，我会养成这样的习惯。我做了建议的更改，但精灵图像仍然向左浮动，并且没有居中。现在Firefox和Chrome都出现了这种情况。感谢您的帮助。以下是替换的css代码：。micrositestopnav ul{显示：块；字体大小：13px；列表样式：无外无；边距：0自动；}。micrositestopnav。水平菜单ul li{边框颜色：#FFFFFF；左边框：0px实心#ffff；填充：0px 0 0；文本对齐：中心；}检查您的代码，正如我所说的文本对齐：中心应应用于div.horizontal-menu，即#menu microsites的父级topnav，我猜您错应用了。horizontal menu ul liI仍然无法将精灵图像居中。我感谢你的时间和耐心。我相信我能分配给水平菜单ulli的父菜单的唯一方法是应用文本align:center；到.micrositetopnav.horizontal菜单{..}。再次向您道歉，并感谢您的帮助和想法。我在WordPress中使用最后通牒框架只是想让你知道。micrositestopnav.水平菜单{text align:center；border:none；}.micrositestopnav.水平菜单ul li{border:none；padding:0px；}.micrositestopnav ul{显示：块；字体大小：13px；列表样式：无；边距：0自动；}没有问题。您是否可以使用更新的代码更新此站点，以便我可以检查并帮助您/创建js fiddle/屏幕截图链接将有助于进一步调试