html - 无法正确居中导航栏(使用 col-md-3)bootstrap css 和 html

Question

所以基本上我得到了这段代码:下面的 HTML 和 CSS，也使用了 bootstrap，但出于某种原因，它没有居中。它曾经是，但在某些时候它不再是了，现在它向左拉。见下图。有任何想法吗？

<div class="row" id="nav-bar">
    <div class="col-md-9">
        <ul>
            <li class="col-md-3 nav-btn" id="home"><a href="index.html">Home</a></li>
            <li class="col-md-3 nav-btn" id="about"><a href="about.html">About</a></li>
            <li class="col-md-3 nav-btn dropdown-toggle" id="games">
                <a href="#">Games & Apps &#9660;</a>
                <div class="dropdown">
                    <ul>
                        <li><a href="#" id="games2">Games & Apps &#9660;</a></li>
                        <li id="first"><a href="#">Space Rodeo</a></li>
                        <li id="spaced"><a href="#">Boodya's Carpet Ride</a></li>
                        <li id="spaced"><a href="#">Ultimate Points Counter</a></li>
                    </ul>
                </div>
            </li>
            <li class="col-md-3 nav-btn" id="blog"><a href="blog.html">Blog</a></li>
        </ul>
    </div>                              
</div>

#nav-bar {
margin: 0px 0px 10px 0px;  
height: 60px;
}

#nav-bar ul {
    margin-top: 20px;   
}

.col-md-3 a {
    padding: 15px 40px 15px 40px;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    color: #B6B6B6;
}

#nav-bar a:hover {
    color: #428bca;
}

.col-md-3 {
    display: inline;   
}

.col-md-9 {
    float: none;
    margin: auto;
    left: 0;
    right: 0;
}

.dropdown {
    padding: 0;
    margin-top: -48px;
    position: absolute;
    z-index: 10;
    background-color: #ffffff;
    box-shadow: -5px -5px 20px;
    border-radius: 5px;
    height: 210px;
    width: 275px;
}

.dropdown ul {
    padding: 0;
    margin-top: 0;
}

.dropdown li {
    list-style: none;
    padding: 0;
    width: 310px;
}

#games2 {
    color: #428bca;
}

#spaced {
    margin-top: 10px;   
}

#first {
    padding-top: 20px;
    border-top: 1px solid black;
    margin-top: 22px;
} 

显示代码结果，导航栏偏离中心

http://i.stack.imgur.com/smtTP.png

Answer 1

您的列表项是 display: inline 这意味着它们将遵循文本的对齐规则。由于您未设置 text-align，因此它默认为左侧。您可以通过将 text-align:center 添加到您的 ul 来解决这个问题，这样内容就会居中。

现在下拉列表的内部也将继承它，您可以通过再次将 text-align: left 设置回下拉列表 ul 来重置它。

同时重置 ul 默认的左填充。

#nav-bar ul {
    padding-left: 0;
    text-align: center;
}

#nav-bar .dropdown  ul {
     text-align: left;   
}

在此 jsFiddle 中工作