6

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.

Marco
  • 1,073
  • 9
  • 22
Lightbeard
  • 4,011
  • 10
  • 49
  • 59

4 Answers4

5

I ended up doing this:

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

ugly :(

Lightbeard
  • 4,011
  • 10
  • 49
  • 59
3

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?

Zonker
  • 31
  • 2
2

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>

Volmar
  • 410
  • 4
  • 17
0

this has been replaced with ion-text-center

<ion-item-divider class="ion-text-center">
  PLEASE CENTER ME!
</ion-item-divider>
osaru agbonaye
  • 87
  • 6