Как выравнять элемент по центру по поперечной оси при наведении (flexbox)?

Question

[Ильфар Хузин]

Горизонтальное меню сайта. Необходимо, описать поведение при наведении курсора.

Исходный вид:

При наведении курсора:

Необходимо, чтобы ссылки сохраняли центральное положение по по вертикальной оси.

CSS код:

/* Menu Styles */
.menu {
  background: #313030;
  height: 12vh;
  display: flex;
  justify-content: space-around;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  text-transform: uppercase;
  display: inline-block;
  margin-right: 2vh;
  padding-left: 3vh;
  padding-right: 3vh;
}

li:hover {
  background: #ff3f40;
  height: 12vh;
  margin-right: 2vh;
  padding-left: 3vh;
  padding-right: 3vh;
}

a {
  color: #e0e0e0;
}

a:hover {
  text-decoration: none;
  color: #e0e0e0;
}

nav {
  display: flex;
  align-items: center;
}

Answer 1

[Максим]

вы height добавьте не в hover а в дефолт а при hover меняйте только background либо вообще паддингами сделайте высоту li

Comments

[Ильфар Хузин]

Сделал высоту падингами. Спасибо.
Оставляю исходный код, пригодится начинающим, вроде меня

CSS-код

/* Menu Styles */
.menu {
display: flex;
background: #313030;
justify-content: space-around;
}

ul {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}

li {
text-transform: uppercase;
padding: 4vh;
padding-bottom: 5vh;
}

li:hover {
background: #ff3f40;
}

a {
color: #e0e0e0;
}

a:hover {
text-decoration: none;
color: #e0e0e0;
}

Результат:

[Максим]

Ильфар Хузин: ну можно и height делать просто в пикселях но главное что бы в дефолте а при hover только то что не сдвигает ресурсы - фон и т д

[Егор Живагин]

Ильфар Хузин: если юзаете флексы, можно даже убрать костыльчик с паддингами и поставить

display: flex;
align-items: center;

Конечно, при заданной высоте.

[Максим]

Егор Живагин: а если не указана высота ? там же на hover повесили высоту ...

[Ильфар Хузин]

Максим Ленский: я убрал высоту, посмотрите мой первый комментарий на ваш ответ

[Максим]

Ильфар Хузин: я понял - писал не вам ...

[Егор Живагин]

Максим Ленский: поэтому я писал комментарий к вашему ответу про высоту, а не новый ответ) Конечно, высоту следует фиксировать и без hover-a, а блокам давать height: 100% . А потом уже можно дописывать то, что я написал выше )

Просто padding-и всё таки не для центрирования.