调整大小后头像图像的垂直和水平中心

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。结果是，头像对齐到一个更大的容器的左上角(这对我来说很好-头像之间的间距)。

如何才能使图像位于离子avater大陆的中心？

Answer 1

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

在你的*.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;
}