CSS: Как выровнять текст по вертикали в сторону адаптивного изображения (также в промежутке)

Question

Я пытаюсь выровнять текст вертикально рядом с изображением (и текст, и изображение находятся в элементе span, заключенном в другой контейнер). Если я установлю изображение на фиксированный размер, все будет работать как положено (вертикальное выравнивание: середина делает свою работу). Если я сделаю его адаптивным, текст больше не будет выровнен по вертикали. Что я тут не так делаю?

body {
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5vw;
    font-size:  2vmin;
}

#first_header {
    background-color: #f2f2f2;
    padding: 0.5em;
    font-weight: bold;
    display: inline-block;
    }

#img_header {

    width: 60%;
    display: table-cell;
}

header span {
    width: 30%;
    font-size: 20px;
    font-size: 1.5vw;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: left;

}

---

<header id="first_header">
        <span>
            <img id="img_header" src="img/logo.png" alt="">
        </span>
        <span>
            Test
        </span>
    </header>

Answer 1

Вы можете попробовать использовать transform свойства, чтобы решить вашу проблему с кодом ниже для вашего текста:

transform: translateY(-50%);

Answer 2

используйте flexBox:

header{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
}

Answer 3

Вы можете установить margin-top и margin-bottom на calc(50% - calc(16px / 2)), где 16px - размер шрифта.