Есть горизонтальное меню, расположенное в блоке, все на flexbox. Как сделать текст блоков "li" по центру вертикали?
Есть сделать margin-top то background так же съезжает вниз, а мне нужно только текст опустить чуть ниже.
Понимаю, что можно и быстрее сделать на div, но все же вдруг есть решение для списка?
<div class="top-menu">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">VST Инструменты</a></li>
<li><a href="#">VST Плагины</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Помощь проекту</a></li>
</ul>
</div>
.top-menu {
display: flex;
width: 40%;
justify-content: center;
background: yellow;
}
.top-menu>ul {
display: flex;
justify-content: space-between;
}
.top-menu>ul>li {
margin-right: 2.5em;
background: gray;
height: 100%;
}
.top-menu>ul>li>a {
color: white;