How to vertically align text in a header bar

Question

As you can see by this codepen even if I set text-align: center; the image is right, but the text is on the bottom. How do I make it vertically aligned to the middle of the image.

 * { margin: 0; padding: 0; } #header { width: 100%; height: auto; position: fixed; top: 0px; background-color: black; color: white; text-align: center; }

 <div id="header"> test <img src="../immagini/logo.png" height="100px" style="padding: 0px 20px">test </div>

Answer 1

This is ridiculously easy. Just use this:

img {
  vertical-align:middle;
}