Hi,
How to align ion-title to center in android, as it is align in center in ios by default.
align-title=“center” is not working in ionic 2
<ion-navbar *navbar align-title="center"> <button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Title</ion-title> </ion-navbar>
Thank you
There isn’t really a good way to do this yet. Right now ios is centered by positioning the ion-title element absolutely and then using padding to make space for the buttons, specifically:
ion-title {
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
}
There’s an open issue to fix the way the ios title is centered:
Would you mind creating an issue to support changing the alignment for android? https://github.com/driftyco/ionic/issues
Thanks! 
@brandyshea @PradeepGill I have added the issue:
(this post is basically the same as my existing post:
)
@PradeepGill - if there is any other information you want to add feel free to do so as a comment to the issue. 
@brandyshea @Mobius77 i have the same problem too align-title=“center” is also not working in Ionic 2, my code is:-
<ion-navbar *navbar class="navbar_wrapper" hideBackButton align-title="center"> <button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>San Francisco</ion-title> <ion-buttons end> <button (click)="location()"> <ion-icon name="pin"></ion-icon> </button> </ion-buttons> </ion-navbar>
Following official Docs and NO USING ANY CUSTOM CSS AT ALL worked for us.
pointer-events: none;
Maybe I’m missing something, but I still can’t do it on other platforms…
How can I set the ion-title to be centered in all platforms?
Right now I used some css but depending on the buttons the navbar have, the title is centered some pixels to the left, or to the right.
buttons on the right and left side:
[back button]Title[option button]
Example with buttons only on the left side
[back button]____________Title
I’m using this workaround. Add a clear button right side of the title then the title is ‘ALMOST’ centered.
<ion-navbar>
<ion-title>{{naveTitle}}<button ion-button clear class="invisibleButton"></button></ion-title>
</ion-navbar>
SCSS
.invisibleButton {
height:10px;
width:40px;
}
You’ll need to adjust button width.
Hi,
Using grids solved this issue for me. I use one row and 3 columns. The first two columns’ width is set to 33% each so the last (invisible) column automatically has its width set to 33% also. Then i apply margin-top: 4% globally to all ion-titles via app.scss.
App.scss
ion-title {
margin-top: 4%;
}
Markup
<ion-header>
<ion-navbar>
<ion-grid>
<ion-row>
<ion-col width-33>
<button ion-button icon-only start menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-col>
<ion-col width-33>
<ion-title text-center>
List
</ion-title>
</ion-col>
</ion-row>
</ion-grid>
</ion-navbar>
</ion-header>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>the backbutton doesn’t work as a result of it…
Just add that to your app.scss and all your titles on android will be centered 
:
.title.title-md {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-align: center;
}
Cheers !
Using this css the back button will no longer be clickable. Because now your title is covering the back button.
I modified your css to this and the back button is also working! Hope this help!
.title.title-md {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
height: 100%;
width: 70%;
text-align: center;
}
Why not try something like:
.toolbar-content{
position: absolute;
width: 100%;
text-align: center;
pointer-events: none;
}
This way you won’t have to guess widths when changing your layout.
you may use mode=“ios” on the ion-title component:
<ion-header>
<ion-navbar>
<ion-title mode="ios">Hello</ion-title>
</ion-navbar>
</ion-header>
i did mode=“android” but i am not able to see the ion-title aligned to left any idea
have you tried to also set the mode on the parent element?:
<ion-navbar mode="android">
Your CSS below does work: centres the title while keeping back button work. But there is a small problem. I use page push/pop animation (sliding in). The title is not centred when the animation starts, and then suddenly jumps to the centre when the animation ends. Is there a fix for this? Basically, I want the title to be centred when the animation starts.
Your CSS works perfectly (centres, back button works, no issue with page animation). The only small problem is that it only works with <ion-navbar mode="ios">, and this makes the back button’s style different from the default Android one.
It works but not totally. The centering depends if there are bottons on the right or not.
Best solution for me was center and add a button that not exist:
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title text-center>REGISTRARME</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="missing_button"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>