How to align title center in iPhone5 with back button

Html :-
<ion-view> <ion-nav-bar class="title_color" align-title="center"> <ion-nav-back-button class="button-icon icon ion-arrow-left-c"></ion-nav-back-button> <ion-nav-title> {{vendor_detail.vendor_name}} </ion-nav-title> </ion-nav-bar> <ion-content></ion-content> </ion-view>

Align=“Centre” in the button

@KimB am facing the same issue, as if there is a back button present in header, the title alignment will get distorted or to the left.
but without ion-nav-back-button the title will align to center and works fine for me.

My guess is the button size is big enough to push the tittle. Can u open up devtool and play with the button css? I believe if u display:float and position:fixed it would do the job. But can tell for sure, there maybe some other rules that does that.

Sorry I can’t focus now, it is late here. I come back tomorrow.

@KimB this will work fine for android, if there is any button size issue there will be a problem in android as well.
This problem is only for the iPhone5.
This will work fine for iPhone6 and iPhone6+.
The css solution i use is this and this will work for me :-
.platform-ios .bar .title{ text-align: center; width: 100%; left: -10px !important; }

But this is not a perfect solution.

Have you tried to add other button on the other side, and make it invisible.


For the title, width:auto?

use span instead of ion-title and stylize it in scss page

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

1 Like