Center align ion-title

Admin 1
Viewed 29766

enter image description here

In the following image the ion-title painting is not properly aligned at the center,How to align at the exact center

home.html

<ion-header>

<ion-navbar>
<ion-title> <p align="center" style="color:white;">{{service.name}}</p>
</ion-title>
</ion-navbar>

</ion-header>
ionic-framework css
5 Answers

Ionic CSS attributes are deprecated.

Replace:

'<ion-title text-center>'

With:

'<ion-title class="ion-text-center">'
user_108312920 
<ion-title text-center>
    <p class="centered-p">Title</p>
</ion-title>

.md .centered-p {
  text-align: center;
  margin-left: -15%
}

it is not perfect but working fine for me in both android & IOS

user_134963090

I just had this happen in our app / converting from Ionic3 -> Ionic6, and it bothered me that none of the answers really seemed to understand that (in the OP's example) 'Painting' should be centered in the center of the app / screen, NOT centered in the remaining space not taken up by whatever buttons/text may or may not exist in slot="start" or slot="end".

This isn't perfect, but it works nicely.

ion-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
user_41144030

In scss of your page paste the following code:

ion-title { text-align: center !important; }

It worked for me.

user_135952560
Related