cssangularionic-framework

How to align items on single row in ion-grid?


I would like to have the text 12345 to be vertically aligned with the avatar on the left. How to solve it first with means of ionic(while using grid) and if not possible, then with css? I've tried to set style="align-items: center;" to the ion-row without much success.

enter image description here

This is the minimal code I used to reproduce the issue.

Following is the code snippet to meet community standards:

<ion-grid [fixed]="true">
<ion-row class="ion-align-items-center">
  <ion-col size="auto">
    <ion-avatar>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
    </ion-avatar>
  </ion-col>
  <ion-col>
    <ion-title><h1>12345</h1></ion-title>
  </ion-col>
</ion-row>
</ion-grid>

Solution

  • Ionic provides css utilities. https://ionicframework.com/docs/layout/css-utilities#flex-properties. try using : ion-justify-content-center or ion-align-items-center