如何将离子头像放置在离子项目的左上角？

Question

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

这是我的代码：

<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 来实现。

将头像位置更改为

absolute

并将其放置在项目的顶角。然后调整标签边距，将文本放回您想要的位置。

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

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

---

输出示例：

Answer 2

我找到了完美的解决方案！
将

ion-align-self-stretch

类添加到

ion-avatar

！

我的例子：

<ion-item>
  <ion-icon class="ion-align-self-stretch" name="text-outline" slot="start"></ion-icon>
  <ion-textarea
    [autoGrow]="true"
    formControlName="description"
    label="Beschreibung"
    rows="1"
  ></ion-textarea>
</ion-item>