Bootstrap 如何实现导航栏菜单文字居中

问题来源：

今天用Bootstrap练习仿站时，发现目标站导航栏的菜单是居中排版方式，而Bootstrap貌似没有导航菜单居中的样式，着实折腾了很久，多次测试终于找到了解决方法，如下：

前后对比：

原始导航栏菜单.png 修改后的导航栏菜单.png

解决方法：

问题代码
<div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-collapse collapse ">
                <ul class="nav navbar-nav" style="clear: both">
                    <li class="active"><a class="navitme" href="#">首页</a> </li>
                    <li><a class="navitme" href="#">Lumen</a> </li>
                    <li><a class="navitme" href="#">问答社区</a> </li>
                    <li><a class="navitme" href="#">中文文档</a> </li>
                    <li><a class="navitme" href="#">下载离线文档</a> </li>
                    <li><a class="navitme" href="#">API</a> </li>
                    <li><a class="navitme" href="#">PHP中文手册</a> </li>
                    <li><a class="navitme" href="#">Composer</a></li>
                </ul>
            </div>
        </div>
    </div>
/*原始CSS*/
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}

修改方法：
1.去掉.navbar-nav和li的左浮动样式(float:none);
2.为.navbar-nav设置文字居中样式(text-align:center);
3.将li转为内连块(display:inline-block);

修改后的代码：
<div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-collapse collapse ">
                <ul class="nav navbar-nav" style="clear: both">
                    <li class="active"><a class="navitme" href="#">首页</a> </li>
                    <li><a class="navitme" href="#">Lumen</a> </li>
                    <li><a class="navitme" href="#">问答社区</a> </li>
                    <li><a class="navitme" href="#">中文文档</a> </li>
                    <li><a class="navitme" href="#">下载离线文档</a> </li>
                    <li><a class="navitme" href="#">API</a> </li>
                    <li><a class="navitme" href="#">PHP中文手册</a> </li>
                    <li><a class="navitme" href="#">Composer</a></li>
                </ul>
            </div>
        </div>
    </div>
/*原始CSS*/
.navbar-default .navbar-nav{
    text-align: center;
    float: none;
}

.navbar-default .navbar-nav li{
    display: inline-block;
    float: none;
}