CODEWITHSUNDEEP
ionic-frameworkionic4
Lightbeard
Lightbeard

Reputation: 4131

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.

Upvotes: 6

Views: 16277

Answers (4)

osaru agbonaye
osaru agbonaye

Reputation: 97

this has been replaced with ion-text-center

<ion-item-divider class="ion-text-center">
  PLEASE CENTER ME!
</ion-item-divider>

Upvotes: 0

Volmar
Volmar

Reputation: 420

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>

Upvotes: 2

Zonker
Zonker

Reputation: 31

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?

Upvotes: 3

Lightbeard
Lightbeard

Reputation: 4131

I ended up doing this:

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

ugly :(

Upvotes: 5

Related Questions