'Ionic 4 ion-title in toolbar is not centered on android

I am wondering if this a common problem. My ion-title is not centered in the toolbar on android.

I googled it but I couldn't find anything for ionic 4, what I did found was a pretty good solution in ionic 3.

here it is: https://stackoverflow.com/a/30021395/4983589

I am wondering if somebody know how to do this in ionic4?

Here an image how it looks on android:

ionic-framework ionic4

Solution 1:^[1]

Ionic v4 keeps toolbar title on left for android devices and on center for IOS devices.

To use a particular behavior you can use mode="md|ios". md is for android and ios for IOS devices.

Since you want to make the title on center, you can use mode="ios" which will make the toolbar title to be on center for both android and ios devices.

This is my header:

<ion-header>
    <ion-toolbar mode="ios">
        <ion-title>
            Add New Rest
        </ion-title>
        <ion-icon slot="end" name="analytics"></ion-icon>
        <ion-buttons slot="start">
            <ion-buttons slot="start">
                <ion-back-button defaultHref="home"></ion-back-button>
            </ion-buttons>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

Have a look at the screenshot below

Solution 2:^[2]

I have tested the followings on my android and the title is centered with other buttons such as back button, etc.

Not too sure if it works on iOS devices
Hopefully this helps:

<ion-toolbar>
    <ion-title style="width: 100%; position: absolute; left: 0; height: 0;">
        Title
    </ion-title>
</ion-toolbar>

Solution 3:^[3]

Adding mode="ios" does work. To simplify you can add mode="ios" to the main HTML tag in the index.html and this will be applied to the entire app so you don't have to add this to each individual HTML page.

Solution 4:^[4]

If you want to keep android mode, you can do the following in your global .scss file:

ion-title {
    &.md {
        width: 100%;
        position: absolute;
        left: 0;
        height: 0;
        text-align: center;
    }
}

This way on the iOS mode title is already centered, you will only be changing the title alignment on the android

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Meraiah
Solution 4	Ajan65

'Ionic 4 ion-title in toolbar is not centered on android

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]