CODEWITHSUNDEEP
htmlcssionic-framework
CoderTn
CoderTn

Reputation: 997

ion-align-items class not centering ionic HTML element

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

Upvotes: 0

Views: 2531

Answers (2)

Vijay Kumawat
Vijay Kumawat

Reputation: 963

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

Upvotes: 2

Najam Us Saqib
Najam Us Saqib

Reputation: 3402

Wrap it in a Div and use flexbox css.

.html

<div class="flex-container">
     <img src="path/to/your/img.png"/>
</div>

.scss

.flex-container {
  display: flex;
  justify-content:center;
  
}

Upvotes: 0

Related Questions