web-dev-qa-db-fra.com

Ionic - le texte de l'élément ion n'est pas centré verticalement lorsque l'icône de l'icône est plus grande

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

 enter image description here

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

cssionic-framework
13
user3607282

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>
24
Luís P. A.

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>

1
Andrews Duarte

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>
0
Diogo Rodrigues