Ionic nav-bar: Title is not centered on Android Device

Question

Im very new to Ionic but i already like it. I wanted to use the nav-barso i implemented the following index.html:

Answer 1

Hi i am changed css and redefine the css like this

.bar.bar-header .button+.title {
text-align: center !important;
left: 35px;
line-height: 46px;
}

its work for me.

Answer 2

I think that this is a better solution for images. Add it to app.scss

.back-button {
    z-index: 100;
}
ion-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

Answer 3

I wrote a fix for Ionic 2.0.x

Add the following style to your .scss file (I placed it in app.scss)

//  Centering title
// --------------------------------------------------
// a fix for centering the title on all the platforms

ion-header {
  .button-md {
    box-shadow: none;
  }

  .toolbar-title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
}

After that add the following markup to your page

<ion-header>
  <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
  <ion-toolbar>
    <ion-buttons left>
      <!-- left aligned content here -->
    </ion-buttons>

    <ion-title>
      Your title or image
    </ion-title>

    <ion-buttons right>
      <!-- left aligned content here -->
    </ion-buttons>
  </ion-toolbar>
</ion-header>