Как центрировать текст <ion-item-divider> в Ionic 4

Question

Как текст может быть горизонтально центрирован внутри <ion-item-divider> элемент в Ionic 4?

Я не могу найти ничего в документах Ionic 4 по центрированию текста html-компонента. В Ionic 3 документах я нашел text-center Утилита атрибутов, как показано ниже и задокументирована здесь, но она не работает.

<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>

Я также попытался добавить style="text-align: center;" к <ion-item-divider> элемент, но это ничего не сделало.

Answer 1

Я закончил тем, что сделал это:

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

некрасиво:(

Answer 2

Вы можете создать класс CSS и назвать его центром. Я использовал глобальные переменные.scss в теме каталога:

.center {
    text-align: center;
}

тогда вы можете сделать что-то вроде этого:

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

Пожалуйста, не используйте встроенные стили. Что такого плохого в встроенном CSS?

Answer 3

В Ionic 4 похоже, что вы должны установить текстовый центр на ионной метке, попробуйте:

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

Answer 4

это было заменено на ion-text-center

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