Html 引导导航的中心内容

我正在尝试将使用bootstrap 3的导航内容放在中心位置。 我已经尝试了一些类似问题的建议解决方案，如下面的css，但可惜没有乐趣

@介质（最小宽度：768px）{
.navbar.navbar导航{
显示：内联块；
浮动：无；
垂直对齐：顶部；
}
.导航栏.导航栏塌陷{
文本对齐：居中；
}
}

Bootply是一个很好的地方，可以找到类似这样的东西的引导示例

CSS:

HTML:

从css中删除.navbar折叠：

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar {
        text-align: center;
    }
}

<nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav center-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar {
        text-align: center;
    }
}