Ionico - il testo dell'oggetto di ioni non è centrato verticalmente quando l'icona ionica è più grande

Question

Ho un elenco di elementi ionici con un'icona seguita da testo. Quando la dimensione dell'icona è inferiore, come si vede sull'immagine qui sotto, il testo sembra allineare verticalmente al centro dell'elemento ionico. Ma quando l'icona è più grande, l'allineamento è un po 'spento.

Questo è tutto ciò che ho aggiunto:

<ion-item> 
    <ion-icon class="icon ion-ios-clock-outline"></ion-icon> 
    Recent 
</ion-item> 

E il CSS:

.icon { 
font-size: 35px; 
color: #ffC977; 
} 

Come posso risolvere questo problema. Ho provato a utilizzare vertical-align, align-item e align-self. Nessuno di loro ha funzionato.

Answer 1

Prova questo. Aggiungere un elemento <span> al testo, vertical-align funziona solo con elementi laterali in linea a fianco:

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> 

Answer 2

Aggiorna il tuo seguente classe CSS. Inoltre puoi spostare il testo su un tag etichetta e dare anche il centro di allineamento verticale per il tag etichetta.

CSS

.icon { 
    font-size: 35px; 
    color: #ffC977; 
    vertical-align: middle; 
    } 

    label{ 
     vertical-align: middle; 
    } 

HTML

<ion-item> 
    <ion-icon class="icon ion-ios-clock-outline"></ion-icon> 
    <label>Recent</label> 
</ion-item>