如何在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