How to align images and text vertically in a list?

Question

css

There is such a list:

<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;
}

And you want the images and text to be vertically centered in this list. How to do it?

Answer 1

For links write:

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