WordPress中的中心导航

Question

我试图在这里的其他线程中找到答案，但我发现什么都不适合我。我想将主要导航文本居中。这是网站： http://goo.gl/kJBnmw

与导航相关的CSS很长，我不确定必须更改哪个确切部分，因此我包括整个CSS：

/*-[ Navigation ]-----------------*/
.secondary-navigation .children li .sf-sub-indicator { display: none }
.secondary-navigation {
    display: block;
    float: right;
    width: 100%;
    height: 39px;
}
.secondary-navigation ul li { }
.secondary-navigation a {
    font-size: 13px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    padding: 10px 14px;
    font-weight: bold;
}
.secondary-navigation a .sub {
    font-size: 11px;
    font-weight: normal;
    font-family: arial;
    color: #9B9B9B;
}
.sf-js-enabled li a.sf-with-ul { padding-right: 20px }
.sf-js-enabled li  ul.sf-with-ul { padding-right: 20px }
#navigation .sf-sub-indicator {
    display: block;
    width: 10px;
    overflow: hidden;
    position: absolute;
    right: 5px;
    top: 9px;
}
#navigation {
    font-size: 13px;
    float: left;
    width: 100%;
    background-color: #535353;
}
#navigation select { display: none }
#navigation ul {
    width: 980px;
    margin: 0 auto;
}
#navigation .menu { }
#navigation ul li {
    float: left;
    position: relative;
}
#navigation ul .header-search { float: right }
#navigation > ul > li:last-child { border-right: none }
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited {
    overflow: hidden;
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    text-transform: capitalize;
}
#navigation ul li a:hover {
    background: #C1377F;
    color: #fff;
}
#navigation > ul > .current a {
    background: transparent;
    color: #5a5a5a !important;
}
#navigation ul li li {
    background: #fff;
    border: 1px solid #eee;
    border-bottom: 0;
}
#navigation ul li li:first-child { border-top: 0 }
#navigation ul ul {
    position: absolute;
    width: 190px;
    padding: 0;
    z-index: 400;
    font-size: 12px;
    color: #798189;
    border-bottom: 1px solid #eee;
}
#navigation ul ul li { padding: 0 }
#navigation ul ul a, #navigation ul ul a:link, #navigation ul ul a:visited {
    padding: 9px 20px;
    position: relative;
    width: 150px;
    border-left: 0;
    background: transparent;
    border-right: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-bottom: 1px solid   rgba(255, 255, 255, 0.05);
    margin: 0;
    color: #555;
}
#navigation ul ul a:hover {
    color: #C1377F;
    background: whiteSmoke!important;
}
#navigation ul ul li:first-child a { }
#navigation ul ul li:last-child a { border-bottom: none }
#navigation ul ul {
    opacity: 0;
    left: -999em;
}
#navigation ul li:hover ul {
    left: auto;
    opacity: 1;
}
#navigation ul ul ul { top: -10px }
#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li:hover ul ul ul ul {
    left: -999em;
    opacity: 0;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul {
    opacity: 1;
    left: 195px;
}
#page-header:after, #navigation ul ul:after {
    content: "";
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}
#navigation ul ul:after {
    left: 10px;
    top: 0px;
}
#navigation ul ul ul:after {
    left: -12px;
    top: 3px;
}

这是我认为应该是相关的 php 代码：

<!--#header-->
        <div class="secondary-navigation">
            <nav id="navigation" >
                <?php if ( has_nav_menu( 'primary-menu' ) ) { ?>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'menu_class' => 'menu', 'container' => '' ) ); ?>
                <?php } else { ?>
                    <ul class="menu">
                        <?php wp_list_categories('title_li='); ?>
                    </ul>
                <?php } ?>
            </nav>
        </div>
    </div>   

任何帮助或想法将不胜感激。

谢谢

Answer 1

像这样：

#navigation ul li {
    float: none;
    vertical-align: top;
    display: inline-block;
    position: relative;
}