Ionic - ion-item text is not vertically centered when ion-icon is bigger
Actually Ionic does that to you. But you need to inform where the elements will be with item-start
, item-end
, etc.
Just set your code like this:
<ion-item>
<ion-icon item-start name="ion-ios-clock-outline" class="icon"></ion-icon>
Recent
</ion-item>
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>