ionic2: Header Title not aligning center

Question

I'm trying to align menu toggle icon to left and title to center of the header. I'm using the below code:

<ion-header>
  <ion-toolbar color="primary">
     <button ion-button menuToggle left>
      <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>
      Home
     </ion-title> 
 </ion-toolbar>

But the title doesn't appear in the centre. please help out. thanks in advance.

Answer 1

For android device you need to put this code

Using this code solved this issue for me.

page.html do this

<ion-header no-border-bottom>

  <ion-navbar color="primary" class="home-nav">
      <ion-title >Dashboard</ion-title>
      <button ion-button menuToggle  >
          <ion-icon name="menu"></ion-icon>
        </button>   
  </ion-navbar>
</ion-header>

app.scss file do this

ion-header button, .back-button {
  position: absolute !important;
  z-index: 5;
}


ion-title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
}

Answer 2

You just need to add the text-center directive to your ion-title or ion-toolbar or add class="ion-text-center"

<ion-header>
  <ion-toolbar color="primary">
     <button ion-button menuToggle left>
      <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title text-center>
      Home
     </ion-title> 
 </ion-toolbar>
</ion-header>

Answer 3

The problem can easily be solved by taking out the button from the content flow: set it's position to absolute which leaves the title as only child in it's parent normal flow. It will take up the entire width and get properly centered.

Something like:

ion-navbar button {
    position: absolute !important;
}