Wie center <ion-item-Teiler - > text, der in Ionischer 4

Wie kann der text horizontal zentriert innerhalb einer <ion-item-divider> element in Ionischer 4?

Kann ich nicht finden, alles, was in der Ionischen 4 docs auf das zentrieren-html-Komponente text. In der Ionischen 3 docs, ich fand die text-center Attribut Dienstprogramm, wie unten gezeigt und dokumentiert hier, aber es funktioniert nicht.

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

Ich auch versucht, indem style="text-align: center;" zu den <ion-item-divider> element, aber das hat da auch nichts.

InformationsquelleAutor Lightbeard | 2018-07-29
  1. 3

    Landete ich, dies zu tun:

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

    hässlich 🙁

    InformationsquelleAutor Lightbeard
  2. 1

    In Ionischer 4 es sieht aus wie Sie sollen, um den text-center auf der ion-label, versuchen:

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

    • Sie müssen width: 100% in der ion-label: ... <ion-label-text-center " style="width: 100%;">BITTE CENTER MIR!!!!</Ionen-label> ...
    • Nicht mehr offensichtlich ist es wunderbar funktioniert, mit v4.1
    InformationsquelleAutor Volmar
  3. 0

    Können Sie erstellen Sie eine css-Klasse, und rufen Sie it-Zentrum. Ich benutzt die globalen Variablen.scss in das Verzeichnis theme:

    .center {
    text-align: center;
}

    dann können Sie etwas wie das hier tun:

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

    Bitte verwenden Sie keine inline-styles..
    Was ist so schlimm daran, in-line CSS?

    InformationsquelleAutor Zonker
Schreibe einen Kommentar