ion-spinner 沒有顯示在 ion-avatar 的中心

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視為父級。 相反，它將ion-item作為父項並顯示在其中心。 請幫忙。

Answer 1

以這種方式修復它。

獲取文本和圖像的父級並將position: relative對於它

然后拿微調器並添加這個 css

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

Position 絕對會“剪輯”到第一個相對定位元素並將自身定位在父元素左側 50% 的位置，然后 go 回到自身的 50%，這將使其完美居中

在此處閱讀有關定位元素的信息。 你應該很清楚。 這真的很重要

希望這有幫助