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 th

Answer 1

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>

Answer 2

Using padding-vertical css utilities can bring the same result. A list of css utilities for Ionic can be seen here: https://ionicframework.com/docs/theming/css-utilities/

<ion-item>
        <ion-row>
            <ion-col width-25>
                <ion-icon class="icon ion-ios-clock-outline"></ion-icon> 
            </ion-col>
            <ion-col width-75 padding-vertical>
                Recent
            </ion-col>              
        </ion-row>
    </ion-item>

Answer 3

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>

Answer 4

Please update your following CSS Class. Also you can move your text to a label tag and give the vertical-align middle for the label tag as well.

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>