Ionic - ion-item text is not vertically centered when ion-icon is bigger

Question

I have a list of ion-items with an icon followed by text. When the icon size is smaller as seen on the image below, the text seems to vertically align itself to the center of the ion-item. But when the icon is bigger, the alignment is a bit off.

This is all I've added:

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

And the CSS:

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

How can I fix this. I tried using vertical-align, align-item and align-self. None of them worked.

Answer 1

Try this. Add a <span> element to the text, vertical-align only works with elements inline side by side :

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>