Как сделать, чтобы кнопка меню, состоящая из двух и больше строк не вылезала за высоту меню

Question

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

<nav>
    <ul class="topmenu">
        <li><a href="#">ГЛАВНАЯ</a></li>
        <li><a href="#">ПОДОБРАТЬ ПЕРСОНАЛ</a></li>
        <li><a href="#" class="prices">ЦЕНЫ</a></li>
        <li><a href="#">ОСТАВИТЬ ЗАЯВКУ</a></li>
        <li><a href="#">ОСТАВИТЬ ВАКАНСИЮ</a></li>
        <li><a href="#">КОНТАКТЫ</a></li>
    </ul>
</nav>

nav {
    margin: 0;
    padding: 0;
}

nav ul {
    
    list-style: none;
    border: 1px solid black;
}

nav > ul {
    display: flex;
    justify-content: center;
}

nav > ul li {
    width: 120px;
    height: 40px;
}
nav > ul li a {
    display: block;
    background-color: blanchedalmond;
    font-size: 11px;
    padding: 14.5px 15px 14.5px 15px;
    color: black;
    text-decoration: none;
    text-align: center;
}

Ссылка на пример

Answer 1

Можно сделать пункты меню и ссылки флекс-элементами. Это упростит вертикальное центрирование и растягивание по по высоте.

nav {
  margin: 0;
  padding: 0;
}


nav>ul {
 list-style: none;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

nav>ul li {
  width: 120px;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}

nav>ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background-color: blanchedalmond;
  font-size: 11px;
  padding: 14.5px 15px 14.5px;
  color: black;
  text-decoration: none;
  text-align: center;
}

<nav>
  <ul class="topmenu">
    <li><a href="#">ГЛАВНАЯ</a></li>
    <li><a href="#">ПОДОБРАТЬ ПЕРСОНАЛ</a></li>
    <li><a href="#" class="prices">ЦЕНЫ</a></li>
    <li><a href="#">ОСТАВИТЬ ЗАЯВКУ</a></li>
    <li><a href="#">ОСТАВИТЬ ВАКАНСИЮ</a></li>
    <li><a href="#">КОНТАКТЫ</a></li>
  </ul>
</nav>

БЛОГ НА HUSL

Как сделать, чтобы кнопка меню, состоящая из двух и больше строк не вылезала за высоту меню

Ответы (1 шт):