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.
<ion-label>
tags will cause it to be vertically centred. In this case, if the text was changed to<ion-label>Recent</ion-label>
, it would be vertically centred. – Dave F