调整大小

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;">

在你的sass页面

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

Answer 3

我发现使用flexbox最简单...

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