调整大小

时间:2017-04-05 18:26:42

标签: ionic2

我有以下显示小头像的代码:

<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。 结果是化身与较大容器的左上角对齐(这对我来说很好 - 化身之间的间距)。

如何让图像位于离子容器的中心?

3 个答案:

答案 0 :(得分:2)

您需要在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;
}

答案 1 :(得分:0)

您可以在img标记中创建一个类,如下所示

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

在你的sass页面

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

答案 2 :(得分:0)

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

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