web-dev-qa-db-fra.com

Ionic centre le texte verticalement et horizontalement sur l'écran

J'essaie d'aligner verticalement mon texte sur mon écran. J'ai lu les documents sur la façon de procéder. Mais je n'ai toujours pas de chance. Voici 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>
ionic-frameworkionic
19
user818700

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

Cela fonctionne sur Ionic Framework 3.0.1:

HTML:

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

TOUPET:

ion-content {
 div {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
}
10
YogliB

Essayez cette solution:

1.Ajoutez 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.Appliquez la classe home à ion-view:

<ion-view class="home">

démo

6
alexmac

Que diriez-vous de spécifier la "hauteur"? Quoi qu'il en soit, centralisez votre texte en horizontal, vous pouvez également utiliser align="center". (Pour être clair, j'ai ajouté la couleur à la ligne et à la 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>
3
tkhm