ion-align-items class not centering ionic HTML element

Issue

i want to center an ion-img inside ion-card

HTML :

<ion-grid>
  <ion-row >
  
  <ion-col size="12"  class="ion-justify-content-center">
      <ion-card  button="true">
        <ion-card-content class="ion-align-items-center">
           <!--center this image-->
          <ion-img src='./assets/images/souscription-assuré.svg' ></ion-img>
           <!--center this image-->
          <h3 class='ion-text-center'>J'ai déjà une assurance</h3>
        </ion-card-content>
      </ion-card>
    </ion-col>

  </ion-row>
</ion-grid>

SCSS :

ion-img{
height: 20vh;
width: 20vh;    
display: block;
}

i used ionic pre-built css classes ion-align-items-center and ion-justify-content-center but it's not centered yet

Solution

You just need to put the margin: auto; in the ion-img css.

Answered By - Vijay Kumawat