ブートストラップnavbarの中央のテキスト

Question

私はこの種のいくつかの答えをStackOverflowで見てきましたが、私の目的には合致しません。私がしようとしているのは、テキストのnavbarです。私が見た他の回答はすべてナビを中心に扱った。ul私がしたいのは、.nav-textをnavbarに置くことです。私はtext-align: centerでテキストをほぼすべての要素（.navbar、.container、.navbar-collapse）に配置しようとしましたが、どれも機能しませんでした。

HTML

<div id="navbar" style="opacity: 0;"> 
     <nav class="navbar navbar-default navbar-fixed-top" style="text-align: center;"> 
      <div class="container" style="text-align: center;"> 
      <div class="collapse navbar-collapse" style="text-align: center;"> 
       <ul class="nav navbar-nav"> 
       <li><a href="/">My Website</a></li> 
       <li><a href="#">About</a></li> 
       </ul> 
       <p class='navbar-text text-center' style='text-align: center;'>My Website</p> 
       <ul class="nav navbar-nav navbar-right"> 
       <p class="navbar-btn"><a href="checkout.php" class="btn btn-success">Continue to checkout <span class='fa fa-arrow-right'></span></a></p> 
       </ul> 
      </div> 
      </div> 
     </nav> 
     </div> 

どのようにこの仕事ができますか？

Answer 1

position:absoluteを使用するのが最善の方法だと思います。このための特別なクラスを作成し、クラスをnavbar-textに追加します。

.navbar-center 
{ 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
} 

http://www.codeply.com/go/KLxn8UrXFW

Answer 2

そうしないと、ナビゲーションメニューをクリックすることはできません、この場合のzインデックスを検討してください。ありがとう

.nabvar-text { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    z-index: 10; 
} 

.navbar-nav, 
.navbar-right { 
    position: relative; 
    z-index: 99; 
}