Как центрировать навигационную панель Bootstrap с изображением бренда между навигационными ссылками?

Чтобы центрировать плавающий navbar-nav, вы можете использовать относительное положение и отрицательные значения left, right для самого navbar-nav и для элементов списка или дочерних элементов.

Чтобы убедиться, что логотип всегда находится по центру, вы можете подумать об использовании не nav-justified, а обычного navbar-nav с фиксированным значением для левого и правого padding в тегах привязки, но с индивидуальными значениями для разных экранов.

Чтобы заставить вертикальное выравнивание работать, просто добавьте соответствующие line-height к тегам привязки.

Я решил скрыть настоящий navbar-brand и показать его только на точке останова sx. Для центрированного логотипа все наоборот, поэтому у нас нет логотипа внутри свернутой навигации. Просто посмотрите на пример, и я уверен, что вы получите идею.

Вот пример.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

.navbar {
  background-color: #231f20;
  min-height: auto;
  position: relative;
  top: 0px;
  font-size: 13px;
  width: auto;
  border-bottom: none;
  margin-bottom: 0px;
  padding: 40px 0px;
}
.navbar-brand {
  padding: 0 15px;
  height: 96px;
}

@media (min-width: 768px) {
  .navbar-nav {
    position: relative;
    right: -50%;
  }
  .navbar-nav > li {
    position: relative;
    left: -50%;
  }
  .navbar-nav > li a {
    line-height: 126px;
    vertical-align: middle;
    padding: 0 24px;
  } 
}

@media (min-width: 992px) {
  .navbar-nav > li a {
    padding: 0 48px;
  } 
}

@media (min-width: 1200px) {
  .navbar-nav > li a {
    padding: 0 68px;
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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 hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Our Food</a></li>
                <li class="hidden-xs"><a href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a></li>
                <li><a href="#">Book a Table</a></li>
                <li><a href="#">Promotions</a></li>
            </ul>
        </div>
    </div>
</nav>

Вы также можете попробовать отображение flexbox. Для того, чтобы его реализовать, вам придется:

1. добавить свойство display: flex к родительскому элементу элементов, которые необходимо выровнять (в данном случае: к элементу <ul> в панели навигации, который содержит список навигационных ссылок и изображение бренда)
2. установите margin: auto для элементов, которые необходимо выровнять (в данном случае: для <li> элементов)

Необязательно: если вы не хотите, чтобы ваши элементы отображались в строке (поведение по умолчанию), измените значение свойства flex-direction. Например. если вы хотите, чтобы элементы были перечислены вертикально, добавьте flex-direction: column; к элементу <ul>.

Вот пример кода с двумя разными местами размещения изображений: вверху списка для мобильных устройств и в середине строки для небольших устройств и выше.

    HTML:
    ...
    <nav class="container">
        <div class="row visible-xs text-center">
            <div class="col-xs-12">
                <a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <ul class="text-center">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">Our Food</a></li>
                    <li class="hidden-xs"><a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a></li>
                    <li><a href="#">Book a Table</a></li>
                    <li><a href="#">Promotions</a></li>
                </ul>
            </div>
        </div>
    </nav>
    ...

    CSS:
        body {background-color: #333333;}
        nav {background-color: #000000;}
        nav ul {
            display: flex; 
            list-style-type: none; 
            padding-left: 0;  //in order to eliminate Bootstrap's built-in 40px padding
        }
        nav ul > li {margin: auto;} //N.B. don't alter the margin property, if you want some further adjustments, use padding!
        nav ul > li > a:link, :visited, :hover, :active {
            color: #ffffff; 
            text-decoration:none;
        }
        @media all and (max-width:767px) {
            nav a > img {margin: 20px auto;}
            nav ul {flex-direction: column;} //only if you want to change the default direction
        }