Вертикально центрирующие элементы nav в Bootstrap 3

Question

Итак, я установил navbar на пользовательскую высоту 80px, но теперь это делает мои навигационные элементы не центрированными по вертикали. Я искал ответ, чтобы сосредоточить их по вертикали относительно своего родительского элемента на некоторое время, поэтому я решил, что дам StackOverflow выстрел.

Скриншот: http://screencast.com/t/zfUuX9SSQK

HTML:

<div class="container-fluid isModified"> 
    <div class="row"> 
     <nav class="navbar isModified" role="navigation"> 
      <div class="col-lg-8 col-lg-offset-2"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
         <span class="sr-only">Toggle Navigation</span> 
         <span class="icon-bar isModified"></span> 
         <span class="icon-bar isModified"></span> 
         <span class="icon-bar isModified"></span> 
        </button> 
        <a href="index.php" class="navbar-brand">Tickets</a> 
       </div> 

       <div class="collapse navbar-collapse" id="nav-collapse"> 
        <ul class="nav navbar-nav isModified"> 
         <li><a href="#">Link 1</a></li> 
         <li><a href="#">Link 2</a></li> 
         <li><a href="#">Link 3</a></li> 
        </ul> 
       </div> 
      </div> <!-- end col-lg-12 --> 
     </nav> 
    </div> <!-- end row --> 
</div> <!-- end container -->  

CSS:

.navbar.isModified { 
height: 80px; 
border-radius: 0; 
background-color: #cccccc; 

} 

.icon-bar.isModified { 
background-color: #fff; 

} 

Answer 1

Вертикальное выравнивание может быть сделано несколькими способами, как показано на this Stack Overflow question. Тем не менее, они довольно ситуативны, то есть нет единого подхода, который может быть применен ко всем случаям.

Для проблемы, с которой вы столкнулись, я предлагаю подход line-height, поскольку весь ваш навигационный контент находится на одной линии. Просто удалите вертикальные отступы на элементах в вопросах и установить их, чтобы иметь такую ​​же line-height как нужную высоту контейнера (80px):

.navbar-nav li a { 
    padding:0 15px; 
    line-height:80px;  
} 
.navbar-header a { 
    padding:0 15px; 
    line-height:80px;  
} 

Вот Bootply продемонстрировать. Надеюсь это поможет! Дайте знать, если у вас появятся вопросы.

В качестве альтернативы, вы можете использовать:

.navbar.isModified a { 
    padding:0 15px; 
    line-height:80px;  
} 

Хотя вы можете найти это слишком широко селектор CSS, если вы планируете стилизации других ссылок в панели навигации по-разному.

Примечание. Если вы хотите, чтобы мобильная версия меню выглядела в порядке, вам может потребоваться использовать медиа-запросы, чтобы переопределить эти стили с большим количеством ваших собственных.

Answer 2

Вы можете сделать это несколькими способами в зависимости от того, как ваши навигационные ссылки должны вести себя. Вероятно, вы захотите применить линии к вашим ссылкам, так что наведите курсор на них по-прежнему на всю высоту навигационной панели выше 768px (или нет, зависит). Затем вы можете использовать другой носитель и добавить дополнение к классу navbar-header, чтобы иметь более высокий навигатор. Не используйте фиксированную высоту, хотя из-за того, что на мобильном устройстве навигатор не будет иметь цвет фона, так как навигационная панель имеет значение по умолчанию min-height: 50px.

Рабочего пример:

.navbar.isModified { 
 
    background-color: #cccccc; 
 
} 
 
.navbar.isModified .icon-bar { 
 
    background-color: #fff; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.isModified .navbar-brand { 
 
    line-height: 50px; 
 
    } 
 
    .navbar.isModified .navbar-nav > li > a { 
 
    line-height: 50px; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar.isModified .navbar-header { 
 
    padding: 15px 0; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <nav class="navbar navbar-static-top isModified" role="navigation"> 
 
     <div class="col-lg-8 col-lg-offset-2"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-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 href="index.php" class="navbar-brand">Tickets</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="nav-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#">Link 1</a> 
 
      </li> 
 
      <li><a href="#">Link 2</a> 
 
      </li> 
 
      <li><a href="#">Link 3</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div> 
 
<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>