1

Can you tell me how to center the avatar image within the column? I have tried text-center,align-self-center and etc. But none of them worked. I can use margin-left:20px like so. But do you know a better and responsiveness way to do this?

<ion-row>
      <ion-col size="4">
        <ion-avatar>
          <img src="assets/images/male.jpg">
        </ion-avatar>
      </ion-col>
      <ion-col size="8">
        <ion-button color="tertiary" shape="round" (click)="updateProfilePicture()"
          text-capitalize>Choose a new photo
        </ion-button>
      </ion-col>
    </ion-row>

Update:

There is no effect at all due to the given duplicate solution.

ion-avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

This is the working solution:

.scss

.center-avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.html

<ion-row>
      <ion-col size="4" class="center-avatar">
        <ion-avatar>
          <img src="assets/images/male.jpg">
        </ion-avatar>
      </ion-col>
      <ion-col size="8">
        <ion-button color="tertiary" shape="round" (click)="updateProfilePicture()"
          text-capitalize>Choose a new photo
        </ion-button>
      </ion-col>
    </ion-row>
Sampath
  • 63,341
  • 64
  • 307
  • 441
  • There is no effect at all. I have applied this `ion-avatar { display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; }` @OfirLana – Sampath Feb 26 '19 at 11:35
  • try them on `ion-col` not `ion-avatar` – Temani Afif Feb 26 '19 at 12:04
  • Yes, then it works. Hope you can answer this question to close this. @TemaniAfif – Sampath Feb 26 '19 at 12:08
  • 1
    In this case I would close it as duplicate since the main issue is the place where you need to apply the common centring properties. They need to belong to the main container where you have the space to center and not to the container that fit the content width/height – Temani Afif Feb 26 '19 at 12:11

0 Answers0