ionic-framework - 如何将 ionic 头像放置在 ionic 项目的左上角？

Question

我有一个 ionic 项目，带有 ionic 头像和带有大文本的 ionic 标签。为了在 ion-label 中显示全文，我向 ion-label 添加了一个类“ion-text-nowrap”。效果很好。但问题是 ionic 头像自动放置在 ionic 项目的垂直中心。我不需要将头像垂直居中对齐。我希望 ionic 项目的左上对齐。我怎样才能做到这一点？

这是我的代码:

<ion-item>
  <ion-avatar slot="start">
    <img [src]="img">
  </ion-avatar>
  <ion-label class="ion-text-nowrap">
    <p>{{text}}</p>
  </ion-label>
</ion-item>

Answer 1

Ionic 中没有 css 属性来实现此目的。但可以通过覆盖 ion-avatar 和 ion-label 的 CSS 来实现。

将头像位置更改为绝对并将其放置在项目的顶角。然后调整标签边距，将文本放回到您想要的位置。

ion-avatar{
  position: absolute;
  top: 0px;
  left: 0px;
}

ion-label{
  margin-left: // size needed
}

---

示例输出: