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

我会使用float:left;

替换#nav-wrp .container ul li中的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

Answer 2

你应该对此进行一些搜索，但无论如何解决方案相当简单。

#nav-wrap .container ul {
  list-style: none;
  display:block;
  overflow: hidden;
  text-align: center;
}

#nav-wrap .container ul li {
  list-style: none;
  display: inline-block;
  background:url(nav-saperator.png) no-repeat right center;
  margin-right: 10px;
  padding-right: 25px;
}

享受

Answer 3

你需要在CSS中使用它：

#nav-wrap .container .wsite-menu-default {
   display:table;
   margin:auto;
}

这是你的小提琴 http://jsfiddle.net/58sqQ/2/

居中导航栏

3 个答案: