css - 中心引导导航项目

Question

我向 ul 添加了一个新类，并尝试使用 margin: 0 auto 和 text-align: center 设置它的样式，但不起作用..

<section class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.php">Home</a></li>
                <li><a href="venue.php">Venue</a></li>
                <li><a href="schedule.php">Schedule</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Artists <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <li><a href="artists.php" tabindex="-1">All Artists</a></li>
                            <li class="divider"></li>
                            <li><a href="#" tabindex="-1">1st</a></li>
                            <li><a href="#" tabindex="-1">2nd</a></li>
                            <li><a href="#" tabindex="-1">3rd</a></li>
                        </ul>
                </li>
                <li><a href="Register.php">Register</a></li>
            </ul>   
        </section>

Answer 1

像这样

演示

css

.nav{
    background-color:red;
    width:300px;
    margin:0 auto;
    text-align:center;
}
.nav ul {
list-style-type:none;

}
.nav ul li{

}

Answer 2

这是中心引导导航项目的小提琴......

jsfiddle

您只需要添加以下 css。

.navbar {
      text-align:center;
}