html - ionic 旋转器未显示在 ionic 化身的中心

Question

在我的 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 视为 parent 。相反，它以 ion-item 作为父项并显示在它的中心。 请帮忙。

Answer 1

以这种方式修复它。

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

然后使用微调器并添加这个 css

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

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

阅读here关于定位元素。你应该完全了解它。这真的很重要

希望对你有帮助