html 对齐导航栏导航的文本框中间

Question

下面是我的代码，我想在导航栏导航的中间和中心对齐文本框。我试过应用它，但文本框仍然无法对齐中心。有什么想法吗？

    <div class="row" style="border-bottom: 1px solid #ffffff;">
        <div class="col-md-12">
            <ul class="nav navbar-nav navbar-left">
                <img src="Images/care2.jpg" title="careplus" />
                <font style="color: white; font-weight: bold; font-family: Candara; font-size: x-large; vertical-align: bottom">Company Name</font>
            </ul>
            <ul class="nav navbar-nav navbar-center" style="text-align: center">
                <asp:TextBox ID="search" runat="server"></asp:TextBox>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <asp:LinkButton ID="lnkCurrentUser" runat="server" Style="padding-bottom: 10px; padding-top: 10px;" OnClick="lnkCurrentUser_Click"></asp:LinkButton>
                    <asp:LinkButton ID="lnkCurrentUser1" runat="server" Style="padding-bottom: 10px; padding-top: 10px" OnClick="lnkCurrentUser1_Click"></asp:LinkButton>
                </li>
                <li>
                    <asp:LinkButton ID="lnkLogout" runat="server" Style="padding-bottom: 10px; padding-top: 10px;" OnClick="lnkLogout_Click"><i class="glyphicon glyphicon-lock"></i> Logout</asp:LinkButton>
                </li>
            </ul>
        </div>
    </div>

我的预期输出:

我当前的输出:

Answer 1

对所有 UL 使用 Bootstrap 响应类 col-xs-4

<div class="row">
    <ul class="col-xs-4 nav navbar-nav navbar-left">
        <img src="Images/care2.jpg" title="careplus" />
        <font style="color: white; font-weight: bold; font-family: Candara; font-size: x-large; vertical-align: bottom">Company Name</font>
    </ul>
    <ul class="col-xs-4 nav navbar-nav navbar-center" style="text-align: center">
        <asp:TextBox ID="search" runat="server"></asp:TextBox>
    </ul>
    <ul class="col-xs-4 nav navbar-nav navbar-right">
        <li>
            <asp:LinkButton ID="lnkCurrentUser" runat="server" Style="padding-bottom: 10px; padding-top: 10px;" OnClick="lnkCurrentUser_Click"></asp:LinkButton>
            <asp:LinkButton ID="lnkCurrentUser1" runat="server" Style="padding-bottom: 10px; padding-top: 10px" OnClick="lnkCurrentUser1_Click"></asp:LinkButton>
        </li>
        <li>
            <asp:LinkButton ID="lnkLogout" runat="server" Style="padding-bottom: 10px; padding-top: 10px;" OnClick="lnkLogout_Click"><i class="glyphicon glyphicon-lock"></i> Logout</asp:LinkButton>
        </li>
    </ul>
</div>