Позиция навигационного элемента bootstrap

Question

Использование навигационного элемента bootstrap Мне нужно разместить приветственное сообщение в центре моего навигатора. Я использую следующий HTML структуру из примеров бутстраповских:

<nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5"> 
      <p class="navbar-text navbar-right welcome-message">Welcome, Tom Delonge</p> 
     </div> 
     </div> 
    </nav> 

Имя после изменения «Добро пожаловать» dynamicaly поэтому я добавил немного кода JQuery, чтобы он всегда в центре:

$(document).ready(function(){ 
    var welcomeMessage = $('.welcome-message'); 
    var width = welcomeMessage.width(); 
    var offset = width/2; 
    welcomeMessage.css('margin-right', '-' + offset + 'px'); 
}); 

FIDDLE Live example

Мне интересно, есть ли лучшее решение, использующее только CSS, например. Заранее спасибо.

Answer 1

удалить ваши JavaScript и заменить CSS с этим:

.welcome-message { float: none !important; text-align: center; }

Answer 2

CSS

.welcome-message { 
    position: absolute; 
    left: 50%; 
transform:translate(-50%,0); 
} 

Только выше CSS будет делать трюк

DEMO

Answer 3

Restructure свой класс для Welcome text и добавить некоторые пользовательские CSS-код для центрирования. Нет необходимости в дополнительном JS.

HTML

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <div class="navbar-collapse" id="bs-example-navbar-collapse-5"> 
     <p class="navbar-text navbar-center welcome-message">Welcome, A very long name here</a></p> 
    </div> 
    </div> 
</nav> 

CSS

.navbar-collapse { 
    text-align:center; 
} 
.navbar-center { 
    display:inline-block; 
    float:none; 
} 

DEMO

Answer 4

Добавить CSS

@media only screen and (max-width: 770px) { 
    .welcome-message { 
     margin-top: -35px; 
     position: absolute; 
    left: 50%; 
transform:translate(-50%,0); 

} 
} 
@media only screen and (min-width: 770px) { 
    .welcome-message { 
    position: absolute; 
    left: 50%; 
transform:translate(-50%,0); 
} 
} 

DEMO