我如何可以覆盖图像中的文本和寻呼机？

Question

我在我的应用程序将滑块的图像，但我不能叠加图像中的文本。

  <ion-slides   *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true">[![enter image description here][1]][1]
      <ion-slide *ngFor="let item of getData" (click)="openItem(item)"> 
          <img src="{{item.jetpack_featured_media_url}}" class="new-collection" /> 
          <h4  [innerHTML]="item.title.rendered"></h4>
      </ion-slide>
    </ion-slides>

Answer 1

使用下面的CSS上h4标签。

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML

<h4 class="centered"  [innerHTML]="item.title.rendered"></h4>

stackblitz example