Bootstrap Navbar горизонтальное выравнивание

Question

Со структурой:

---------------------------------------------- 
 Logo Text                  item1 item2_1 item3
                                  item2_2
----------------------------------------------

То, что я хочу, это центрировать по горизонтали логотип, текст и элементы. item2 слишком длинный и состоит из 2 частей. Я пытался, но не могу получить.

Код следующий:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <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" href="#?>"><img src="Logo.png" style="height: 25px;" class="d-inline-block align-middle">Text</a>
    </div>
    <div class="navbar-collapse collapse navbar-right">
      <ul class="nav navbar-nav">

        <li><a href="#">item1</a></li>
        <li><a href="#">item2_1<br>item2_2</a></li>
        <li class="menuletra"><a href="#">item3</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

CSS

.navbar {
min-height: 70px;
padding-top: 5px;
margin-bottom: 0px;
z-index: 100;}

Спасибо

Answer 1

Если вы хотите центрировать текст по горизонтали в раскрывающемся меню, просто установите text-align: center на .navbar. Если вы хотите, чтобы логотип и текст располагались немного по краям экрана в представлении рабочего стола, вам нужно добавить max-width к .navbar > .container.

Это можно увидеть в следующем:

.navbar {
  min-height: 70px;
  padding-top: 5px;
  margin-bottom: 0px;
  z-index: 100;
  text-align: center;
}

.navbar > .container {
  max-width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <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" href="#?>"><img src="http://placehold.it/100" style="height: 25px;" class="d-inline-block align-middle">Text</a>
    </div>
    <div class="navbar-collapse collapse navbar-right">
      <ul class="nav navbar-nav">

        <li><a href="#">item1</a></li>
        <li><a href="#">item2_1<br>item2_2</a></li>
        <li class="menuletra"><a href="#">item3</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>