Ionique centrer le texte verticalement et horizontalement sur l'écran

Je suis en train de alignées à la verticale de mon texte sur mon écran. J'ai lu à travers les docs sur la façon de le faire. Mais je ne suis pas encore avoir de la chance. C'est mon code:

<div class="row">
  <div class="col col-center text-center">
    <h4 class="gray">This text is in the center of the screen</h4>
  </div>
</div>
InformationsquelleAutor | 2015-10-28
  1. 15

    HTML

    <div class="row">
    <div class="col">
        <div class="text-center">
            <h5 style="text-align: center;">This text is in the center of the screen</h5>
        </div>
    </div>
</div>
    • merci à vous, bien que cela ne fonctionne pas.. C'est presque exactement le même que ce que j'ai
    InformationsquelleAutor Muhsin
  2. 9

    Cela fonctionne sur Ionique Cadre 3.0.1:

    HTML:

    <ion-content padding>
 <div>
  <h4 class="gray">This text is in the center of the screen</h4>
 </div>
</ion-content>

    SASS:

    ion-content {
 div {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
}
    InformationsquelleAutor YogliB
  3. 6

    D'essayer cette solution:

    1.Ajouter de nouveaux styles css:

    .home .scroll-content {
  display: table !important;
  width: 100% !important;
  height: 100% !important;
  margin-top: -50px; /* the height of the centered content */
  text-align: center;
}
.home .scroll {
  display: table-cell;
  vertical-align: middle;
}

    2.Appliquer home classe de ion-view:

    <ion-view class="home">

    démo

    • cette solution ci-dessus fonctionne très bien pour moi..
    InformationsquelleAutor alexmac
  4. 3

    Comment spécifier la "hauteur"?
    De toute façon, de centraliser votre texte à l'horizontale, vous pouvez également utiliser align="center".
    (Pour faire clair, j'ai ajouté de la couleur à la ligne et col.)

    <div class="row" style="height: 900px; background-color: blue;">
  <div class="col col-center" style="background-color: red;>
    <h4 class="gray" align="center">This text is in the center of the screen</h4>
  </div>
</div>
    InformationsquelleAutor tkhm