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

I ended up doing this:

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

ugly :(

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?

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>

Related