试图对子菜单进行居中

Question

我在这个超级菜单上遇到了很多麻烦(在我的下一个项目中，我将研究修改它/使用其他东西的其他方法)--我正在尝试对列表项进行居中，但是我没有幸运地添加空白:0 auto；to the ULs。

我如何管理这些项目的水平中心？我希望他们在左边的空间和右边的空间一样多。

<ul id="superfish-2" class="menu sf-menu sf-main-menu sf-horizontal sf-style-whiteshadow sf-total-items-3 sf-parent-items-1 sf-single-items-2 superfish-processed sf-js-enabled sf-shadow">
<li id="menu-1299-2" class="first odd sf-item-1 sf-depth-1 sf-no-children">
<a class="sf-depth-1" title="" href="http://jobcreatr.com/activity">Activity Feed</a>
</li>
<li id="menu-1300-2" class="middle even sf-item-2 sf-depth-1 sf-no-children">
<a class="sf-depth-1" title="" href="http://jobcreatr.com/course-categories">Course Categories</a>
</li>
<li id="menu-1301-2" class="last odd sf-item-3 sf-depth-1 sf-total-children-6 sf-parent-children-0 sf-single-children-6 menuparent">
<a class="sf-depth-1 menuparent sf-with-ul" title="" href="http://jobcreatr.com/products">
My Courses
<span class="sf-sub-indicator"> »</span>
</a>
<ul class="sf-hidden" style="float: none; width: 27em; display: block;">
<li id="menu-2170-2" class="first odd sf-item-1 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/business" style="float: none; width: auto;">Business</a>
</li>
<li id="menu-2171-2" class="middle even sf-item-2 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/computers" style="float: none; width: auto;">Computers</a>
</li>
<li id="menu-2172-2" class="middle odd sf-item-3 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/education" style="float: none; width: auto;">Education</a>
</li>
<li id="menu-2173-2" class="middle even sf-item-4 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/health" style="float: none; width: auto;">Health & Fitness</a>
</li>
<li id="menu-2174-2" class="middle odd sf-item-5 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/labor" style="float: none; width: auto;">Labor</a>
</li>
<li id="menu-2175-2" class="last even sf-item-6 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2" title="" href="/course-categories/other" style="float: none; width: auto;">Other</a>
</li>
</ul>
</li>
</ul>

/* New Submenu Information */

.sf-menu.sf-horizontal.sf-shadow ul, .sf-menu.sf-vertical.sf-shadow ul, .sf-menu.sf-navbar.sf-shadow ul ul {
width: 100% !important;
background-color: #f5f5f5;
background-image: none;
    list-style-type: none;
    text-align: center;
    margin-top:81px;

}

.sf-menu.sf-horizontal.sf-shadow ul a, .sf-menu.sf-vertical.sf-shadow ul a, .sf-menu.sf-navbar.sf-shadow ul ul a {
position: static;
left: 0;
display: inline-block;
/*background-color: #f5f5f5;*/
/*padding-top: 81px;*/
color: #8F8F8F;
}
.sf-menu.sf-horizontal.sf-shadow ul a:hover, .sf-menu.sf-vertical.sf-shadow ul a:hover, .sf-menu.sf-navbar.sf-shadow ul ul a:hover {
color: #000;
}

.sf-menu.sf-style-whiteshadow .sf-depth-2 { 
width: auto !important;
background-color: #f5f5f5;
 }


.content .sf-menu li {
  position: static;
}

如果我有一个包含第二个UL的div，它看起来会工作得更好，但我并没有真正的选择。

http://jobcreatr.com/home

Answer 1

可能你说的是你的子菜单。子菜单li有导致问题的float:left;。我希望下面的代码能起作用。

.sf-menu ul {
    text-align: center;
}
.content .sf-menu li {
    float: none !important;
    display: inline-block;
}

Answer 2

可以尝试更新以下css..。

#block-superfish-2 {
float: right;
margin: 0.7em 6em 0 0;
}