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

<ion-view>
<ion-nav-title class="title">Login
</ion-nav-title>
<ion-content>

</ion-content>

Answer 2

I tried many of the solutions listed here and still had the following 2 issues with native Android builds:

1. The title text either getting shifted off the left side of the screen or just plain not appearing at all
2. The title text not being vertically centered in the nav bar

The following CSS resolved both of these issues for me:

.platform-android .bar .title {
    line-height: 52px !important;  // vertically centers title on native Android builds
}

.bar .title {
    position: absolute;
    left: 0px !important;
    right: 0px !important;
    width: 100%;
    text-align: center !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

Answer 3

Try add the align-title="center" attribute in your ion-nav-bar

<ion-nav-bar class="bar-positive" align-title="center">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

Answer 4

By design Android titles are aligned to the left. I believe the correct way to change this behaviour is by using the $ionicConfigProvider in your angular .config method for your main angular module. This provider has a property navBar.alignTitle(value) where "value" can be platform(default), left, right or center. This is described in the docs here

For example

var myApp = angular.module('reallyCoolApp', ['ionic']);

myApp.config(function($ionicConfigProvider) {

  // note that you can also chain configs
  $ionicConfigProvider.navBar.alignTitle('center');
});

This In my opinion is the correct way to override this behaviour.

Answer 5

As mentioned in the above answer, you can simply use $ionicConfigProvider.navBar.alignTitle('center'); and override the centering behavior of all your view titles. OR, if you need to change the position of your view title on other views, then you can simply make use of center HTML tag around the title. You can see the demo here Ionic Title

Answer 6

<ion-header >
	<div align="center">
		<ion-navbar>
   		<ion-title primary>Tittle</ion-title>
  	</ion-navbar>
	</div>
</ion-header>