リスト要素をブートストラップナビバーの中央に配置するにはどうすればいいですか？

Question

左上隅に画像、上中央に入力ボックス、右上隅にユーザープロファイルのリンクが必要です。

"text-center"クラスは機能しません。左右のフロートは動作しません。テキストアライメントセンターが機能しません。行方不明の操作や、これを簡単にする一連のコンテナが必要です。何か案は？この編集で

<nav class="navbar navbar-inverse"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="/crud"><img id="cornerImg" src="/images/beaker.png"></a> 
    </div> 
    <div class="centerDiv"> 
    <ul class="nav navbar-nav"> 
    <li> 

     <!-- POST FORM --> 
     <form method="post" class="form-inline" id="userCreateForm"> 
     <div class="form-group"> 
      <input name="userCreate" type="text" class="form-control" id="userCreateBox" placeholder="Ask your question here!"> 
      <input name="username" type="text" value="<%= user.username %>" hidden="true"> 
     </div> 
     <div class="form-group"> 
      <button type="submit" class="btn btn-default" id="submitButton">Ask</button> 
     </div> 
     </form> 
    </li> 
    </ul> 
</div> 
    <ul class="nav navbar-nav navbar-right"> 
    <li id="userProfile"><a href="/profile/<%= user.username %>"><%= user.username %></a></li> 
    </ul> 
</div> 

、タイトルは左とプロフィールのリンクは右ですが、フォームはまだ中心ではありません。

Answer 1

あなたは、ナビゲーションバーを中心に、以下のCSSを使用することができます。

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

.navbar .navbar-collapse { 
    text-align: center; 
} 

コードが中央にナビゲーションバーの要素のすべてを行います。