Как выровнять в списке изображения и текст вертикально?

Question

[Анастасия]

Есть такой список:

<div class="header">
<div class="header-bottom-panel">
<ul>
<li><a href=""><img src="img/img.svg">First</a></li>
<li><a href=""><img src="img/img.svg">Second</a></li>
<li><a href=""><img src="img/img.svg">Third</a></li>
<li><a href=""><img src="img/img.svg">Fourth</a></li>
<button>Start</button>
</ul>
</div>
</div>

.header {
    justify-content: space-between !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header .header-bottom-panel ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-bottom-panel ul li {
    margin-left: 30px;
    font-size: 16px;
    color: #191E57;
}

И нужно чтобы изображения и текст были вертикально по центру в этом списке. Как это сделать?

Answer 1

[Виталий Першин]

Для ссылок пропишите:

display: flex;
justify-content: center;
align-items: center;