ion-spinner 没有显示在 ion-avatar 的中心答案

【问题标题】：ion-spinner not showing in the center of ion-avatarion-spinner 没有显示在 ion-avatar 的中心
【发布时间】：2020-03-09 14:32:41
【问题描述】：

在我的 Ionic3 项目中，我试图在图像的中心显示一个微调器。以下是我的 HTML 和 SCSS 文件。

HTML：

<ion-item no-lines no-padding>
  <ion-avatar item-start no-margin>
      <img [src]="imgURL" (load)="loaded = true"/>
      <ion-spinner class="imgSpinner" *ngIf="loaded"></ion-spinner>
  </ion-avatar>
<ion-label no-margin>{{name}}</ion-label>
</ion-item>

SCSS：

  .imgSpinner{
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: auto;
      z-index: 9;
  }

问题是ion-spinner 没有将ion-avatar 视为父母。相反，它将ion-item 作为父级并显示在它的中心。请帮忙。

【问题讨论】：

标签： html css ionic-framework sass spinner

【解决方案1】：

这样解决。

获取文本和图像的父级并将position: relative 放入其中

然后使用 spinner 并添加这个 css

.spinner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

绝对定位将“剪辑”到第一个相对定位元素并将自身定位在父元素左侧 50% 的位置，然后返回自身的 50%，这将完美居中

阅读here 了解定位元素。你应该很清楚。真的很重要

希望有帮助

【讨论】：