How can I let the ion-header-bar title align:center in new version?

ionic-v1
1

Why in the new version, the ion-header-bar title is not the same old version align:center? It’s align-left.

If I want to like the old version, let it align:center, how can I do?

this is my code:

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>test</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>

<ion-header-bar class="bar-positive">
    <button class="button button-icon ion-navicon">
    </button>
    <h1 class="title">mytitle</h1>
    <button class="button button-icon ion-grid">
    </button>
</ion-header-bar>
2

hi,
you can navBar.alignTitle

read this
http://ionicframework.com/docs/api/provider/$ionicConfigProvider/

1 Like
3

It worked.
thank you^^

4

If you are seeing this on an Android device, this is done on purpose. Android style guidelines say that view titles should be left aligned.

5

navBar.alignTitle(‘center’) works but maybe it could be nice to have a title-center class as we have title-right and title-left.

<h1 class="title title-center">Hello world</h1>

Cheers!