web-dev-qa-db-fra.com

Méthode correcte pour centrer les éléments dans ionic2

J'ai placé du texte et un bouton sur la page. Je le centre actuellement en utilisant des méthodes css traditionnelles que je connais. Est-ce la bonne façon de centrer dans IONIC 2?

<ion-content padding class="login-signup">

  <ion-card>

  <div class="or-label">
   SOME-TEXT
  </div>

  <div class="signup-button">
    <button outline>Signup</button>
  </div>

</ion-content>

// css correspondant

 .or-label {
    width: 20%;
    font-size: 16px;
    margin: 0 auto;
    margin-top: 2em;
    margin-bottom: 2em;
    height: 50px;
    text-align: center;
    color: red;
  }


.signup-button {
  text-align:center;
}
htmlcssionic2ionic3
8
runtimeZero

Mise à jour

Tout comme @ AndrewGraham-Yooll mentionné dans sa réponse, l'attribut fab-center A été supprimé il y a quelques versions, alors maintenant la seule façon de le faire serait d'utiliser un conteneur avec le text-center - attribut d'utilité

<ion-content padding class="login-signup">

  <ion-card text-center>
    <div class="or-label">
      SOME-TEXT
    </div>
    <button outline>Signup</button>
  </ion-card>

</ion-content>

Vous pouvez centrer le button en ajoutant l'attribut Ionic2fab-center Comme ceci:

<button fab-center outline>Signup</button>

Vous pouvez trouver plus d'informations sur les attributs Ionic2 dans Ionic2 docs .

En ce qui concerne les autres div, parce que ce n'est pas un Ionic (comme un bouton ou une étiquette), vous devez le centrer en utilisant un css rules Traditionnel comme vous fais ou utilise un attribut utilitaire comme text-center.

Veuillez également noter que dans votre code, il manque une balise de saisie: </ion-card>

6
sebaferreras

Ionic 2 possède des attributs utilitaires utiles qui peuvent être ajoutés aux éléments.

Dans ce cas, ajouter text-center à un élément appliquera le text-align: center propriété, ce qui entraîne le centrage de son contenu interne.

Un exemple utilisant votre code serait quelque chose comme ...

<ion-card text-center>
    <div class="or-label">
        SOME-TEXT
    </div>
    <button outline>Signup</button>
</ion-card>
9
Will.Harris

La réponse de @sebferras n'est plus correcte pour la version Ionic 2> 2.0.0

Vous devez mettre votre bouton dans un div et appliquer text-center.

<div text-center>
   <button ion-button large>
     Click Here
   </button>
</div>
8
Andrew Graham-Yooll