Problem align text in the center

Ionic Framework ionic-v3
1

Hello! I have a problem align text in the center in the header because of arrow for back page. My code is like this:

<ion-header>
  <ion-navbar>
    <ion-title>
        <center>
            Domótica
        </center>
    </ion-title> 
  </ion-navbar>
</ion-header>

image
shot.png1080×1848 24.4 KB

But the text “Domótica” is not in the center. Somebody know who can resolve it?
Thank in advace.

Best regards.

1 Like
2

Same issue but in my case, the title element is not vertically centered.

3

Have you tried fixing it using css ?

It works for me when i’m using a simple : text-align : center

4

I’m using this workaround. Add a clear button right side of the title then the title is ‘ALMOST’ centered.

<ion-navbar>
    <ion-title>{{title}}<button ion-button clear class="invisibleButton"></button></ion-title>
</ion-navbar>

SCSS

.invisibleButton {
    height:10px;
    width:40px;
}

You’ll need to adjust button width.

1 Like
5

adding this to the app.scss solves the problem:

.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;
}

1 Like