Как я могу наложить текст и пейджер внутри изображения?

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>

Пример стекаблиц