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

Bootstrap具有預定義的居中文本類text-center ，您可以將其添加到任何元素/ div。

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

在此處查看所有引導程序對齊類： http : //getbootstrap.com/css/#type-alignment

Answer 2

只需將要居中的div賦予text-align:CENTER; 屬性。

有時，使用純CSS而不是Bootstrap會更容易。

 div.center{ text-align:CENTER; } 

 <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 center"> <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 3

text-center類可幫助您僅在屏幕大小小於768px時使Text Center鏈接居中（但在這種情況下社交鏈接會掉落！），如果屏幕大小大於768px，則引導程序的類navbar-text具有float: left屬性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，例如