javascript - 将导航栏居中

Question

我有一个网站，coolmath3.org (在 weebly 上)，并希望将导航栏居中。我试过了，但没用。

HTML:这是导航栏

<div id="nav-wrap">
    <div class="container">
        <ul class="wsite-menu-default">
            <li class="wsite-nav-0" style="position: relative;" id="active"><a style="position: relative;" href="/">Home</a>

            </li>
            <li class="wsite-nav-1" style="position: relative;" id="pg340443743893615061"><a style="position: relative;" href="/about.html">About</a>

            </li>
            <li class="wsite-nav-2" style="position: relative;" id="pg867313554258978042"><a style="position: relative;" href="/suggestions.html">Suggestions</a>

            </li>
        </ul>
    </div>
    <!-- end container -->
</div>

CSS:

#nav-wrap .nav {
    float:left;
}
#nav-wrap .container {
    clear: both;
    overflow: hidden;
    position: relative;
    background:url(saperator-h.png) repeat-x bottom;
    padding-bottom:40px;
}
#nav-wrap .container ul {
    list-style: none;
}
#nav-wrap .container ul li {
    list-style: none;
    float: left;
    background:url(nav-saperator.png) no-repeat right center;
    margin-right: 10px;
    padding-right: 25px;
}
#nav-wrap .container ul > li:last-child,
#nav-wrap .container ul span:last-child li {
    background:none;
}
#nav-wrap .container ul li a {
    display: block;
    line-height:14px;
    border: 0;
    outline: 0;
    list-style-type: none;
    text-transform:uppercase;
    padding:5px;
    margin-bottom:4px;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
    color:#000;
}

这是一个jsfiddle

Answer 1

我会将 #nav-wrp .container ul li 中的 float:left; 替换为 display:inline-block;

然后我会将 text-align:center; 添加到 #nav-wrap .container ul

这是一个你可以使用的工作示例，我使用了提供的相同的 css 和 html

http://jsfiddle.net/jdW5m/

这些是唯一的改变

#nav-wrap .container ul {
    list-style: none;
    text-align:center; /* added */
}
#nav-wrap .container ul li {
    list-style: none;

    /* Removed float: left; */

    display:inline-block; /* added */
    background:url(nav-saperator.png) no-repeat right center;
    margin-right: 10px;
    padding-right: 25px;
}

有关 float 工作原理的更多信息，您可以查看 MDN article