css - 如何在图像中叠加文本和寻呼机？

Question

我正在我的应用程序中添加 slider 图像，但我无法覆盖图像中的文本。

  <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

在 h4 标签上使用下面的 CSS。

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

HTML

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

stackblitz example