Jonic - tekst pozycji jonowej nie jest wyśrodkowany w pionie, gdy ikona jonów jest większa

Question

Mam listę elementów jonowych z ikoną, po której następuje tekst. Kiedy rozmiar ikony jest mniejszy, jak widać na poniższym obrazku, tekst wydaje się być wyrównany do środka elementu jonowego. Ale gdy ikona jest większa, wyrównanie jest nieco oddalone.

To wszystko Dodałem:

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

I CSS:

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

Jak mogę to naprawić. Próbowałem użyć vertical-align, align-item i . Żadne z nich nie działało.

Answer 1

Spróbuj tego. Dodaj element <span> do tekstu, vertical-align działa tylko z elementów inline obok siebie:

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

Proszę zaktualizować swój CSS następujące klasy. Możesz także przenieść swój tekst do znacznika etykiety i podać pionowy środek etykiety znacznika.

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>