Search code examples
ionic-frameworkionic4

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

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.

Solution

  • I ended up doing this:

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

    ugly :(