Ionic - Ion-Item Text Is Not Vertically Centered When Ion-Icon Is Bigger

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

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>

Make ion content (or text or label) vertically center

Wrap the <ion-grid> under a <div> and at the div make height: 100% (you need vertical center, so the wrapper should be 100%) , then display: flex; align-items: center; justify-content: center;

I am affecting <ion-grid> with <div>, make sure

1. Anything else isn't affecting <ion-grid> other than <div>
2. Your <div> isn't affected by something else

Otherwise, you might need a different implementation.

Finally it looks like it :

Here is code:

  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" >
              <ion-col>
                <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
              </ion-col>
              <ion-col>
                <ion-button  color="secondary" class="ion-float-right" size="small">
                  Back
                </ion-button>
              </ion-col>
            </ion-row>
            
            <ion-list >
              <ion-item>
                <ion-text>Hi</ion-text>
              </ion-item>
              <ion-item>
                <ion-text>Hello</ion-text>
              </ion-item>
            </ion-list>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

</div>

Credits:

From Ionic forum, I have got help from this question :

https://forum.ionicframework.com/t/ion-card-center-alignment/170521/8

Check saad-ansari 's reply there.

How to centre ionic-icon in Ionic app when ion-text-centre is not working?

This should work for you

      <ion-grid>
        <ion-row>
          <ion-col size="12" text-center>
            <ion-item>
             <ion-icon name="logo-rss"></ion-icon>
            </ion-item>
           </ion-col>
          </ion-row>
        </ion-grid> 

Basically you want to use icon grid to control layout and placement within col and rows.

Align a button within ion-item using text-center attribute doesn't work

I found a solution by modifying the CSS. I am not sure why I have to do that. Because I already special text-center in my ion-item tag. Here is my working css is. :

.homeBtn {
 /* display:block; */
 height: 50px;
 width: 300px;
 /* border-radius: 50%; */
 border: 1px ;
 /* display: flex; */
 /* justify-content: center; */
 background-color: white;
 color: black;
 text-align: center;
}

How to place ion-avatar top-left of an ion-item?

There are no css properties to achieve this in Ionic.
But it is possible by overwriting the css of the ion-avatar and ion-label.

Change the position of the avatar to absolute and place it in the top corner of the item. Then adjust the label margin to place the text back where you want it.

ion-avatar{
  position: absolute;
  top: 0px;
  left: 0px;
}

ion-label{
  margin-left: // size needed
}

---

Example output:

---

Related Topics