Почему вектор и текст не выравниваются вертикально в этой панели навигации?

Question

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

body {
    background-color: #ECEFF1; /* Blue Gray 50 */
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

#header {
    background-color: #ba68c8; /* Purple 300 */
    color: #ffffff; /* White */
    height: 24px;
    padding: 8px;
}

.header-link {
    font-size: 24px;
    text-decoration: none;
}

<div id="header">

    <a class="header-logo" href="#">
        <img src="http://www.sigmacubes.com/img/logo_h.svg" height="24" />
    </a>

    <a class="header-link" href="#">
      Text
    </a>

</div>

Хотя svg выровнен по вертикали, текст не выравнивается по вертикали.Почему это происходит?

Answer 1

Что вы можете сделать, это уменьшить размер шрифта заголовка ссылки до 20px и присвоить ему абсолютную позицию

.header-link {
    font-size: 20px;
    text-decoration: none;
    position: absolute;
}

Или, если вы хотите оставить размер 24px, лучше указать margin-top: -5pxтоже

.header-link {
    font-size: 24px;
    text-decoration: none;
    position: absolute;
    margin-top: -5px;
}

Answer 2

Является ли vertical-align:middle; опцией для вашего класса ссылки на заголовок? Возможно, добавьте display: table-cell; в сочетании с vertical-align:middle;, если это дополнительно соответствует желаемому виду.