css Question posted in
Some basic documentation can be found here.

Css – 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>
Tags:

2

Answers


  1. 0

    It seems that ionic-framework set the default margins for h1
    enter image description here

    You can override this default marigns in your app.component.css file, the following code set the h1 to margin top/bottom: 16px, margin left/right: 0px which will vertically center text 12345.

    ion-col > ion-title > h1 {
  margin: 16px 0;
}
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search