Not able to center text in navbar

Ionic Framework ionic-v3
1

Hello everyone,

this should be a simple one.

I already tried item-center but didn’t work

<ion-header>
    <ion-navbar>
        <ion-title text-center>{{title}}</ion-title>
    </ion-navbar>

    <ion-toolbar padding>
        <ion-searchbar placeholder="Search..." hideCancelButton="true"></ion-searchbar>
    </ion-toolbar>
</ion-header>

my {{title}} is not getting centered. I’m using beta10

Can I do this without changing scss?

Here is how it’s shwon:

image

2

I got around this by adding another button on the right side and matching the css to the back button, you could disable it and make it invisible (Mine is just a home button).

3

I think this is maybe not the best way but it works.
Add this in your scss
.title{
text-align:center;
}

<ion-title class=“title”>{{title}}</ion-title>

4

So this is not possible with the current set up. At least not cleanly.

5

The following change solved the problem for me. I copied the code from ionic/src/components/toolbar/toolbar.ios.scss and changed it to md and wp:

app.scss

.toolbar-title-md {
  text-align: center;
}
.toolbar-md ion-title {
  position: absolute;
  top: 0;
  left: 0;

  padding: 0;  

  width: 100%;
  height: 100%;

  pointer-events: none;
}
.toolbar-title-wp {
  text-align: center;
}
.toolbar-wp ion-title {
  position: absolute;
  top: 0;
  left: 0;

  padding: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}
8 Likes
6

Thank you! It’s working :smiley: