Center the title on Ionic for Android


#1

the part where NOTICIAS is the title, and it is float to the left just right to the Login button, what can I do to fix this ?


#2

I’m also having the same issue so looking forward to getting a solution.


#3

the android guidelines makes it that way, everything goes to the left, but I need to know if Ionic has a solution for that


#4

I think this is what you want

https://github.com/driftyco/ionic/blob/master/js/angular/directive/headerFooterBar.js

@param {string=} align-title How to align the title. By default the title
 * will be aligned the same as how the platform aligns its titles (iOS centers
 * titles, Android aligns them left).
 * Available: 'left', 'right', or 'center'.  Defaults to the same as the platform.
 * <ion-header-bar align-title="left" class="bar-positive">
 *   <div class="buttons">
 *     <button class="button" ng-click="doSomething()">Left Button</button>
 *   </div>
 *   <h1 class="title">Title!</h1>
 *   <div class="buttons">
 *     <button class="button">Right Button</button>
 *   </div>
 * </ion-header-bar>
 * <ion-content>
 *   Some content!
 * </ion-content>
 * 

#5

just use : $ionicConfigProvider.navBar.alignTitle(‘center’);`
See http://ionicframework.com/docs/api/provider/$ionicConfigProvider/


#6

Please search the forums before posting a new topic. :smile:


#7

you can do this


#8

Just add

.toolbar-title {
  text-align: center;
}

to your main app.scss, worked for me