Как центрировать элементы навигатора по вертикали (Twitter Bootstrap)?

Это мой CSS/LESS код CSS:

//make navbar taller
@navbarHeight: 60px;

//make navbar link text 18px
.navbar-inner {
    font-size: 18px;
}

//make navbar brand text 36px
.navbar .brand {
    font-size: 36px;
}

Что производит это:

enter image description here

FYI Я использую демо-код Twitter Bootstrap, я не изменил html (кроме изменения названия бренда).

Как вы можете видеть, название бренда центрируется по вертикали внутри навигационной панели, как и должно быть, но навигационные ссылки не являются (они немного выше к вершине). Проблема стала очевидной только после того, как я изменил высоту навигационной панели. Как я могу заставить их центрировать по вертикали (например, этот сайт)?

Если это поможет, подсветка элементов в Chrome показывает следующее:

enter image description here

Ответы

Ответ 1

Класс .brand использует другой line-height, чем базовый текст, который используется во всех Bootstrap, а также несколько других ключевых различий.

Соответствующие части исходного бутстрапа navbar LESS -

Для .brand:

.brand {
  // Vertically center the text given $navbarHeight
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
  font-size: 20px;
  line-height: 1;
}

Для ссылок на навигационной панели:

.navbar .nav > li > a {
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
  line-height: 19px;
}

Вам, вероятно, придется поиграть со значениями @elementHeight, line-height и, возможно, padding для селектора .navbar .nav > li > a, чтобы отразить большее значение 60px @navbarHeight (эти значения по умолчанию предназначены для 40px @navbarHeight). Возможно, попробуйте запустить 40px @elementHeight и/или высоту строки 29px.

Ответ 2

Вы можете попробовать следующее:

display: table-cell;

Ответ 3

Если приведенный выше ответ не помогает, и вы не касаетесь html, единственное, что я могу придумать, это css. Возможно, вы захотите посмотреть на css, который использовал пример начальной загрузки и изменил размеры .navbar-inner и .navbar .brand соответственно.

Ответ 4

У меня была аналогичная проблема с Bootstrap 3, но с брендом eliment. В конце я использовал следующий css:

.navbar-brand {
  font-size: 3em;
  line-height: 1em;
}

Моя панель навигации увеличилась в размере из-за изображения 50 пикселей, с верхним и нижним полями 10 пикселей. Не уверен, что это поможет.