如何将导航栏的一部分居中

Question

我的导航栏如下：

<nav class="navbar navbar-inverse" id="header">
    <div class="container-fluid">
        <div class="navbar-header">
            Welcome
        </div>
    <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right">
            <li>@*<a href="LogOff"><span class="glyphicon glyphicon-log-out"></span>Log out</a>*@
                <form action="LogOff">
                    <input type="submit" class="btn btn-default" id="logoff" value="LogOff" />
                </form>
            </li>
            </li>
        </ul>
    </div>
    </div>
</nav>

我希望欢迎栏位于我的页面中心。我尝试用css：

.navbar-header
{
    display:block;
    text-align:center;
} 

但我的欢迎仍然保持一致。想知道如何集中欢迎？

补充：

#header
{
    background-color:#293939 ;
    color: White;
    text-align:center;
    font-size:17px;
    height: 40px;
}

Answer 1

给它一些最大宽度，左右两侧有一个自动边距。

即

.navbar-header
{
   max-width: 250px;
   margin: 0 auto;
}