HTML / CSS - Center multiple divs inline - html, css

Snažím sa dosiahnuť niečo skôr základné, aleNepodarilo sa mi to dosiahnuť. Mám obrázok a titul, ktorý by mal byť zobrazený v strede nadradeného výberu (div). Bohužiaľ neviem, ako ich správne zarovnať, keď sa sústredím na logo aj na text.

html:

  <div class="content">
<div class="header">
<img src="/images/path/to/image">
<span>Hey this is my title</span>
</div>
</div>

CSS:

.header{
text-align: center;
width: 100%;
height: 40px;
}
.header img{
height: 40px;
width: auto;
display: inline-block;
}
.header span{
display: inline-block;
}

Ako vidíte, logo má statickú šírku / výšku, zatiaľ čo text môže mať premenlivú výšku. Vyššie uvedený kód robí štýl ako príklad nižšie:

Môže mi niekto povedať, ako to urobiť? Ja v podstate chcem niekoľko divov vedľa seba, ale všetky zarovnané v stredu.

odpovede:

Hľadáte vertical-align: middle stred vertikálne?

.header {
text-align: center;
width: 100%;
height: 40px;
}
.header img {
height: 40px;
width: auto;
display: inline-block;
vertical-align: middle;
}
.header span {
display: inline-block;
vertical-align: middle;
background: #eef;
}

<div class="content">
<div class="header">
<img src="/images///placehold.it/40?text=Logo" />
<span>Hey this is my title</span>
</div>
</div>

Poznámka: Pridal som pozadie pre lepšiu viditeľnosť hraníc.

Lepšie vysvetlenie:

Použite flexbox. Neviem, či som správne dostal, že chcete, aby boli vaše položky sústredené tak horizontálne, ako aj vertikálne v hlavičke. justify-content part.

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

Viac informácií o flexboxu: https://css-tricks.com/snippets/css/a-guide-to-flexbox/