CODEWITHSUNDEEP
ionic2
user1692261
user1692261

Reputation: 1217

Vertical and horizontal center of avatar image after resizing

I have the following code that display small avatars:

<ion-avatar *ngFor="let user of item.users;">
  <img src="{{ user.avatar }}" style="max-width:2.5rem; max-height:2.5rem;">
</ion-avatar>

As it seems, the default size of ion-avatar is 4rem on 4rem . The result is that the avatars are aligned to the top left corner of a bigger container (which is fine for me - spacing between the avatars).

How can I make the image to be in the center of the ion-avater continer?

Upvotes: 1

Views: 4454

Answers (3)

user2493235
user2493235

Reputation:

I find this easiest using flexbox...

ion-avatar {
  display:flex;
  align-items: center;
}

Upvotes: 0

G B
G B

Reputation: 2453

You can create a class in your img tag as shown below

<img class="myavt" src="{{ user.avatar }}" style="max-width:2.5rem; max-height:2.5rem;">

In your sass page

.myavt{
           left: 50%;
         transform: translate(-50%,-50%);
}

Upvotes: 0

Wesley Coetzee
Wesley Coetzee

Reputation: 4848

you need to set margin: auto; in your *.scss

in your *.component.ts

<ion-avatar class='avatar' *ngFor="let user of item.users;">
  <img src="{{ user.avatar }}" style="max-width:2.5rem; max-height:2.5rem;">
</ion-avatar>

in your *.component.scss

.avatar img {
  margin: auto;
}

Upvotes: 2

Related Questions