Ionic header image and text not appears on the same line

Question

I have to make ionic header image and the text to appear on the same line but the text was placed little bit lower than the image.

<ion-header-bar class="bar-positive" align-title="center">
    <h1 class="title" >
        <img class="title-image" src="http://www.fnordware.com/superpng/pngtest16rgba.png" height="80%" />
        <span>App Project</span>
     </h1>
  </ion-header-bar>

Codepen ex

Answer 1

Just set vertical-align: middle; to the title-image like this:

.title-image {
  vertical-align: middle;
}

This will result it to be vertically aligned with the title/text.

Codepen