如何在Bootstrap導航欄中居中項目

Question

我已經盡力了，但不幸的是我無法將文本中心1和2元素置於導航欄中間。希望你能幫助我。謝謝。

<div class="navbar navbar-default navbar-bottom" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-text pull-left"> 
 
     <p>Left</p> 
 
    </div> 
 
    <div class="navbar-text ???"> 
 
     <a href="#"><i>Text Center 1</i></a> 
 
     <a href="#"><i>Text Center 2</i></a> 
 
    </div> 
 
    <div class="navbar-text pull-right"> 
 
     <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> 
 
     <a href="#"><i class="fa fa-twitter fa-2x"></i></a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

只要給要居中text-align:CENTER;財產股利。

有時使用普通的CSS代替Bootstrap會更容易。

div.center{ 
 
    text-align:CENTER; 
 
}

<div class="navbar navbar-default navbar-bottom" role="navigation"> 
 
    <div class="container"> 
 
\t <div class="navbar-text pull-left"> 
 
     <p>Left</p> 
 
\t </div> 
 
\t <div class="navbar-text center"> 
 
\t <a href="#"><i>Text Center 1</i></a> 
 
\t <a href="#"><i>Text Center 2</i></a> 
 
\t </div> 
 
\t <div class="navbar-text pull-right"> 
 
\t <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> 
 
\t <a href="#"><i class="fa fa-twitter fa-2x"></i></a> 
 
\t </div> 
 
    </div> 
 
</div>

Answer 2

引導有一個預定義居中文本類text-center，您可以添加到任何元素/ DIV。

例如：<div class="navbar-text text-center">

查看這裏所有的引導對準類：http://getbootstrap.com/css/#type-alignment

Answer 3

類text-center幫助你唯一的中心Text Center鏈接時，屏幕尺寸小於768px（但在這種情況下，社會聯繫倒下！ ），如果屏幕尺寸大於768px，引導程序的類navbar-text的屬性爲float: left，並且您的鏈接將位於導航欄的左側。爲了防止它的行爲，您需要爲中間導航欄適用float: none和display: inline-block屬性：

<div class="navbar navbar-default navbar-bottom" role="navigation"> 
    <div class="container text-center"> 
    <div class="navbar-text pull-left"> 
     <p>Left</p> 
    </div> 
    <div class="navbar-text myClass"> 
     <a href="#"><i>Text Center 1</i></a> 
     <a href="#"><i>Text Center 2</i></a> 
    </div> 
    <div class="navbar-text pull-right"> 
     <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> 
     <a href="#"><i class="fa fa-twitter fa-2x"></i></a> 
    </div> 
    </div> 
</div> 

.myClass { 
    float: none; 
    display: inline-block; 
} 

類text-center在這種情況下，用於div.container

JSFiddle-example