HTML / CSS - Center multiple divs inline
<p>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.</p>

<p><strong>Html:</strong></p>

<pre><code>  &lt;div class="content"&gt;
    &lt;div class="header"&gt;
      &lt;img src="path/to/image"&gt;
      &lt;span&gt;Hey this is my title&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p><strong>CSS:</strong></p>

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

<p>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:</p>

<p><img src="https://i.stack.imgur.com/DxKlc.png" alt="Example Image"></p>

<p>Can anyone tell me how to do this? I basically want several divs next to eachother, but all aligned in the center.</p>