Как использовать flex box, чтобы BS4 nav-item заполнял высоту navbar текстом по центру по вертикали

Question

Я пытаюсь использовать flexbox для настройки bootstrap 4 навигационной панели. Я хочу, чтобы элементы nav занимали всю высоту элемента div navbar, сохраняя их содержимое по центру по вертикали, а расстояние между 3 горизонтальными ссылками соответствовало (используя justify-content-around). Мне не удалось использовать код ниже. Возможно ли это?

Любая помощь будет оценена.

Answer 1

Похоже, что для получения ссылок bootstrap navbar, чтобы заполнить всю высоту панели навигации и центрировать текст по вертикали, мне нужно было добавить таргетируемый контейнер внутри класса .nav-link, чтобы применить align-self: center к.

Я использовал тег span и решил использовать CSS, а не встроенные классы для обеспечения чистоты кода, и в моем случае я ограничил его только идентификатором #mainNav.

Интересно, если есть еще более чистый способ сделать это без дополнительного тега span.

#mainNav,
.collapse,
.nav-link {
  display: flex;
  align-items: stretch;
}

#mainNav .navbar-nav {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

#mainNav .nav-item {
  display: flex;
}

#mainNav .nav-link span {
  align-self: center;
}

Answer 2

Попробуйте добавить класс "my-0 p-0" в образ вашего бренда

Затем добавьте примерно "height: 3.7em" к вашим ссылкам и добавьте "py-3". класс им