HTML / CSS - Center multiple divs inline - html

Question

I'm try to accomplish something rather basic but I failed to succeed, so far.
I have an image and a title which should be displayed in the center of the parent selector (div). Unfortunately I don't know how to properly align them when I center both the logo and the text.
Html:
<div class="content">
<div class="header">
<img src="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;
}
As you can see the logo has a static width/height while the text can have a variable height.
The code above makes the styling like the example below:
Can anyone tell me how to do this? I basically want several divs next to eachother, but all aligned in the center.

Answer 1

Are you looking for vertical-align: middle to center vertically?
.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="//placehold.it/40?text=Logo" />
<span>Hey this is my title</span>
</div>
</div>
Note: I have added background for better visibility of the borders.
A better explanation:

Answer 2

Use flexbox. I don't know if I correctly got that you want your items to be centered both horizontally and vertically inside header. If not just delete the justify-content part.
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
More info about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/