文本居中在离子网格内部的离子化身下方

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>

这给了我这个：

如您所见，文本不在我测试过的text-center属性的ion-item属性中的离子头像下方，其中包含文本和离子头像，但这似乎不起作用...

顺便说一句，如果您还建议将ion-col完美居中，我也会接受。

编辑1：

由于@Phonolog，我设法使它居中完美，现在，如果有人建议降低第一个ion-row高度以完全匹配第一个图片，那将是很好的<3，我已经尝试过修改高度属性没有成功。 （我是最糟糕的前端开发人员。）

关于， 托马斯。

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>

如果您想更靠近图像，则可能需要减小第一行的高度...