Center img in ion-card

Ionic Framework ionic-v3
1

Hello, I need to center one image in a ion-card, with these tests there isn’t any good results

<ion-card>
   <div style="width:100%;text-align: center;align-content: center;align-self: center;">
        <img [src]="myPicture"></img>
   </div>
</ion-card>

ion-card{
	text-align: center;
	align-content: center;
	align-self: center;
	img{
	  text-align: center;
	  align-content: center;
	  align-self: center;
	  max-width: 710px;
	  max-height: 710px;
	}
}

I heard about flex properties to use in ion-card, but I didn’t find any “center” option in anyone of the flex properties : flex-direction, flex-wrap, etc…

2

because you use ion card,there is some default css applied automatically which may not allow you to apply user defined css or allow you but it will not affect the view so i suggest you to you ion-row in your code


<ion-card>
    <ion-card-content>
      <ion-row>
        <ion-col col-4></ion-col>
        <ion-col col-4>
          <img src="assets/imgs/logo.png" style="height: 50px;width: 50px;" />
        </ion-col>
        <ion-col col-4></ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

this is like patch in view but perfact :smile::wink:

1 Like
3

This patch works perfectly. Thanx !
Edit : To display a large picture rather than a shrunken logo, I changed the cols as : col-2 , col-8, col-2.

1 Like