html align textbox mitte von navbar-nav

Question

unten sind meine code, ich möchte die textbox in der mitte und mitte von navbar-nav ausrichten. Ich habe versucht, dies anzuwenden, aber die Textbox immer noch nicht ausrichten center.any Ideen warum?

<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> 

meine erwartete Ausgabe:

meiner aktuellen Ausgabe:

Answer 1

Verwenden reaktions Klasse col-xs-4 Bootstrap für alle UL

<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> 

Answer 2

Verwenden Bootstrap navbar

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <li class="pull-left"><a href="#">Dashboard</a></li> 
    <li class="active"><a href="#">Stories</a></li> 
    <li><a href="#">Videos</a></li> 
    <li><a href="#">Photos</a></li> 
    <li class="social pull-right"><a> <input type="text" name="firstname"></a></li> 
    </ul> 

</div><!-- /.navbar-collapse --> 

/* css*/ 

    .navbar-nav { 
width: 100%; 
text-align: center; 
> li { 
    float: none; 
    display: inline-block; 
} 
}