23
votes

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.

enter image description here

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.

4
Enclosing the text within <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

4 Answers

48
votes

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>
5
votes

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>
0
votes

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>
-3
votes

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>