我有以下显示小头像的代码:
<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。 结果是化身与较大容器的左上角对齐(这对我来说很好 - 化身之间的间距)。
如何让图像位于离子容器的中心?
答案 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;
}