CODEWITHSUNDEEP
cssionic-framework
user3607282
user3607282

Reputation: 2555

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

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.

Upvotes: 31

Views: 48141

Answers (5)

Megha Shetty
Megha Shetty

Reputation: 11

<span style="font-size: 18px;vertical-align: middle !important;">
    <ion-icon name="location" class="location-icon"></ion-icon>
  </span>
  <span style="height:80px !important;">
    <b style="font-size: 18px;vertical-align: middle !important;">Port Louis, MU</b>
  </span>

Upvotes: 1

Andrews Duarte
Andrews Duarte

Reputation: 186

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>

Upvotes: 9

Diogo Rodrigues
Diogo Rodrigues

Reputation: 1332

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>

Upvotes: 0

Fazil Abdulkhadar
Fazil Abdulkhadar

Reputation: 1101

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>

Upvotes: -3

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

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>

Upvotes: 71

Related Questions