J'ai une liste d'éléments-ion avec une icône suivie d'un texte. Lorsque la taille de l'icône est plus petite que sur l'image ci-dessous, le texte semble s'aligner verticalement sur le centre de l'élément ion. Mais lorsque l'icône est plus grande, l'alignement est un peu désactivé.
C'est tout ce que j'ai ajouté:
<ion-item>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
Recent
</ion-item>
Et le CSS:
.icon {
font-size: 35px;
color: #ffC977;
}
Comment puis-je réparer cela. J'ai essayé d'utiliser vertical-align
, align-item
et align-self
. Aucun d'entre eux a travaillé.
Essaye ça. Ajoutez un élément <span>
au texte, vertical-align
ne fonctionne qu'avec des éléments alignés:
CSS
.icon {
display: inline-block;
font-size: 35px;
color: #ffC977;
vertical-align: middle;
}
.text{
display: inline-block;
vertical-align: middle;
}
HTML
<ion-item>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
<span class="text">Recent</span>
</ion-item>
En fait, Ionic vous le fait. Mais vous devez indiquer où seront les éléments avec item-start
, item-end
, etc ...
Il suffit de définir votre code comme ceci:
<ion-item>
<ion-icon item-start name="ion-ios-clock-outline" class="icon"></ion-icon>
Recent
</ion-item>
Utiliser les utilitaires css padding-vertical peut apporter le même résultat . Une liste des utilitaires css pour Ionic peut être vue ici: https://ionicframework.com/docs/theming/css-utilities/
<ion-item>
<ion-row>
<ion-col width-25>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
</ion-col>
<ion-col width-75 padding-vertical>
Recent
</ion-col>
</ion-row>
</ion-item>