文本在 ion-grid 内的 ion-avatar 下方居中

Question

我想达到这个结果：

目前这是我用来实现此目的的方法：

<ion-row no-padding align-items-center>
  <ion-col col-4>
    <ion-item class="avatars nobackground" icon-start no-lines text-left> . 
      <ion-icon name="stopwatch"></ion-icon>
      1h
     </ion-item>
  </ion-col>
  <ion-col col-8>
    <ion-item no-lines text-left>
      <ion-avatar text-center>
        <img [src]="workout.coach?.image_name" />
      </ion-avatar>
      <span>{{ workout.coach?.firstname }} {{ workout.coach?.lastname }}</span>
     </ion-item>
   </ion-col>
</ion-row>

这给了我这个：

如您所见，文本不在 ion-avatar 下方居中，我在 ion-item 中测试了包含文本和 ion-avatar 的 text-center 属性，但这似乎不起作用...

顺便说一句，如果您也有建议让ion-col 完全居中，我也会接受。

编辑 1：

感谢@Phonolog，我已成功将其完美居中，现在如果有人建议减少第一个ion-row 高度以完美匹配第一张图片，那就太好了

问候， 托马斯。

Answer 1

如何创建第二行并将 imgs 显示设置为内联？请参阅此StackBlitz。用于简洁的内联样式...

<ion-row no-padding align-items-center>
    <ion-col>
        <ion-item class="avatars nobackground" icon-start no-lines text-left>
            <ion-icon name="stopwatch"></ion-icon>1h
        </ion-item>
    </ion-col>
</ion-row>
<ion-row>
    <ion-col>
        <ion-item no-lines text-center>
            <ion-avatar text-center>
                <img [src]="workout.coach?.image_name" style="display: inline;"/>
            </ion-avatar>
            <span>{{ workout.coach?.firstname }} {{ workout.coach?.lastname }}</span>
        </ion-item>
    </ion-col>
</ion-row>

如果您想更接近您的图像，您可能需要降低第一行的高度...