Центрирование логотипа бренда в Bootstrap 3 Navbar

Ответ 1

Попробуйте следующее:

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

Центрирование логотипа на 50% и минус половину ширины логотипа, чтобы он не имел проблем при масштабировании и выходе.

См. fiddle

Ответ 2

Самый простой способ - css transform:

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

DEMO: http://codepen.io/candid/pen/dGPZvR

Этот способ также работает с динамическими размерами фоновых изображений для логотипа и позволяет нам использовать класс text-hide:

CSS

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  width: 200px; /* no height needed ... image will resize automagically */
}

HTML:

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>

Мы также можем использовать flexbox. Однако, используя этот метод, нам пришлось бы перемещать navbar-brand вне navbar-header. Этот способ велик, потому что теперь мы можем иметь изображение и текст бок о бок:

.brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.navbar-brand {
  display: flex;
  align-items: center;
}

Демо: http://codepen.io/candid/pen/yeLZax

Чтобы добиться этих результатов только на мобильных устройствах, просто оберните вышеуказанный css внутри медиа-запроса:

@media (max-width: 768px) {

}

Ответ 3

Обновлено 2017

Bootstrap 3

Посмотрите, помогает ли этот пример: http://bootply.com/mQh8DyRfWY

Бренд центрирован с использованием.

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

Ваша разметка предназначена для Bootstrap 2, а не 3. Больше нет navbar-inner.

EDIT. Другой подход заключается в использовании transform: translateX(-50%);

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

http://www.bootply.com/V7vKDfk46G

Bootstrap 4

В Bootstrap 4, mx-auto или flexbox можно использовать для центровки бренда и других элементов. См. Как разместить содержимое навигатора в Bootstrap 4 для объяснения.

Также смотрите:

Bootstrap NavBar с выровненными влево, в центре и вправо деталями

Ответ 4

Старый вопрос, но только для потомков.

Я нашел самый простой способ сделать это, чтобы изображение было фоновым изображением бренда navbar. Просто убедитесь, что вы установили пользовательскую ширину.

.navbar-brand
{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-image: url('logo.png');
}

Ответ 5

Решение, где логотип по-настоящему центрирован и ссылки оправданы.

Максимальное рекомендуемое количество ссылок для навигатора - 6, в зависимости от длины слов в ссылке eache.

Если у вас есть 5 ссылок, вставьте пустую ссылку и создайте ее с помощью:

class="hidden-xs" style="visibility: hidden;"

таким образом количество ссылок всегда четное.

<link href="#" onclick="location.href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<style>
  .navbar-nav > li {
    float: none;
    vertical-align: bottom;
  }
  #site-logo {
    position: relative;
    vertical-align: bottom;
    bottom: -35px;
  }
  #site-logo a {
    margin-top: -53px;
  }
</style>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Nav</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav nav-justified navbar-nav center-block">
        <li class="active"><a href="#">First Link</a></li>
        <li><a href="#">Second Link</a></li>
        <li><a href="#">Third Link</a></li>
        <li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
        <li><a href="#">Fourth Link</a></li>
        <li><a href="#">Fifth Link</a></li>
        <li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li>
      </ul>
    </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>