垂直和调整大小

Question

后化身图像的水平中心我有以下代码显示小替身：

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

，因为它似乎，离子化身的默认大小是上4rem 4rem。 结果是化身与一个更大的容器的左上角对齐（这对我来说很好 - 化身之间的间距）。

如何使图像处于离子探测器的中心？

Answer 1

你需要设置margin: auto;在*.scss

在* .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> 

在* .component.scss

.avatar img { 
    margin: auto; 
} 

Answer 2

您可以创建一个类您的img标签如下所示

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

在你顶嘴页

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