How to get Logo and Title centered?

Ionic Framework
1

Hello,

I want to add a logo to the header bar, but I don’t get the text vertical centered when I add a image:

Unbenannt

My Code:

<ion-header>
  <ion-toolbar>
    <ion-title>
        <img alt="logo" id="header_logo" height="40" float-left src="assets/images/logo_40.png"> NotSan Hessen
    </ion-title>
  </ion-toolbar>
</ion-header>
2
3 
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Search Results</ion-title>
  </ion-navbar>
</ion-header>

here is a demo of my code its working fine just change ion icon with your picture

4

@MaBbKhawaja
Seems like that doesn’t work with images:

Unbenannt

<ion-header>
  <ion-toolbar>
    <button ion-button>
        <img alt="logo" id="header_logo" height="40" src="assets/images/logo_40.png">
    </button>
    <ion-title>
          NotSan Hessen
    </ion-title>
  </ion-toolbar>
</ion-header>
5

@nirav_ionic
Vertical center, not horizontal

6

This isn’t Ionic-specific, but I have a generic CSS class I use for this sort of thing, which should work for you:

.hcs {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<ion-header>
<ion-toolbar>
<ion-title>
<div class="hcs">
<img src="assets/images/logo.png">
<span>NotSan Hessen</span>
</div>
</ion-title>
</ion-toolbar>
</ion-header>
2 Likes
7 
<ion-icon><img alt="logo" id="header_logo" height="40" src="assets/images/logo_40.png"></ion-icon>

try this

8

Use CSS flex. I use them always whenever something has to be centered.

9

My solution, but only tested in my browser:

<ion-header>
  <ion-toolbar>
    <ion-title>
        Notsan Hessen
    </ion-title>
  </ion-toolbar>
</ion-header>

ion-title {
    line-height: 40px;
    padding-left: 50px;
    background: url('../../assets/images/logo_40.png') no-repeat left center;
}

Unbenannt

2 Likes