How to center <ion-item-divider> text in Ionic 4

Question

How can text be horizontally centered within a <ion-item-divider> element in Ionic 4?

I can't find anything in the Ionic 4 docs on centering html component text. In the Ionic 3 docs, I found the text-center attribute utility as shown below and documented here, but it doesn't work.

<ion-content padding>
  <ion-list>
    <ion-item>
      Hello, I am left aligned
    </ion-item>
    <ion-item-divider text-center>
      PLEASE CENTER ME!
    </ion-item-divider>
  </ion-list>
</ion-content>

I also tried adding style="text-align: center;" to the <ion-item-divider> element, but that did nothing as well.

Answer 1

I ended up doing this:

  <ion-item-divider>
    <div style="width: 100%; text-align: center;">PLEASE CENTER ME!!</div>
  </ion-item-divider>

ugly :(

Answer 2

You can create a css class and call it center. I used the global variables.scss in the directory theme:

.center {
    text-align: center;
}

then you can do something like this:

<ion-label>
    <p class="center">Some text</p>
</ion-label>

Please Don't use inline styles.. What's so bad about in-line CSS?

Answer 3

In Ionic 4 it looks like you're supposed to set the text-center on the ion-label, try:

<ion-item-divider> <ion-label text-center>PLEASE CENTER ME!!</ion-label> </ion-item-divider>