Как центрировать элементы в Bootstrap navbar

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

Просто дать DIV, который вы хотите, чтобы центрировать 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

Bootstrap имеет предопределенный центрированный текст класса text-center, который можно добавить к любому элементу/дел.

пример: <div class="navbar-text text-center">

Показать все бутстраповские классы выравнивания здесь: http://getbootstrap.com/css/#type-alignment

Answer 3

Класс text-center помогает центрировать Text Center ссылки только когда экран размером меньше, то 768px (но в этом случае социальные связи падают!), если размер экрана больше 768px, класс bootstrap 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