如何在Bootstrap导航栏中居中放置项目

Question

I've tried my best but unfortunately I am not able to position the Text Center 1 and 2 elements in the middle of the navbar. Hope you can help me out. Thanks.

 <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 has a predefined centered text class text-center that you can add to any element/div.

example: <div class="navbar-text text-center">

View all bootstrap alignment classes here: http://getbootstrap.com/css/#type-alignment

Answer 2

Just give the div that you want to center the text-align:CENTER; property.

Sometimes it is just easier to use plain CSS instead of 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

Class text-center helps you to center Text Center links only when screen-size is less then 768px (but in this case social links fall down!), if screen-size is more 768px, bootstrap's class navbar-text has property float: left and your links will be left side of navbar. To prevent its behavior, you need to apply float: none and display: inline-block properties for middle navbar:

<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;
}

class text-center in this case is used for div.container

JSFiddle-example