Avinash Raj Avinash Raj - 3 months ago 16
AngularJS Question

Ionic header image and text not appears on the same line

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>

Codepen ex


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.