htmlのテキストボックスの中央のnavbar-navの

Question

の

は私のコードです、私はテキストボックスをnavbar-navの中央と中央に揃えたいと思います。 私はこれを適用しようとしましたが、テキストボックスはまだcenter.anyのアイデアを揃えることができませんでしたか？

<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

<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

使用ブートストラップナビゲーションバー

のための応答クラスCOL-XS-4をブートストラップ

<nav class="navbar navbar-default" role="navigation"> 

<!-- 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; 
} 
}