web-dev-qa-db-fra.com

Comment centrer le texte <ion-item-divider> dans Ionic 4

Comment le texte peut-il être centré horizontalement dans un <ion-item-divider> élément dans Ionic 4?

Je ne trouve rien dans le Ionic 4 docs sur le centrage du texte du composant html. Dans le Ionic 3 docs, j'ai trouvé les text-center utilitaire d'attribut comme indiqué ci-dessous et documenté ici , mais cela ne fonctionne pas.

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

J'ai également essayé d'ajouter style="text-align: center;" à la <ion-item-divider> élément, mais cela n'a rien fait de bien.

ionic-frameworkionic4
4
Lightbeard

J'ai fini par faire ça:

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

laid :(

4
Lightbeard

Vous pouvez créer une classe css et l'appeler centre. J'ai utilisé le global variables.scss dans le thème du répertoire:

.center {
    text-align: center;
}

alors vous pouvez faire quelque chose comme ceci:

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

Veuillez ne pas utiliser de styles en ligne .. Qu'est-ce qui est si mauvais avec les CSS en ligne?

1
Zonker

Dans Ionic 4 il semble que vous soyez censé définir le centre du texte sur l'étiquette ionique, essayez:

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

1
Volmar