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

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>

标签： cssionic-frameworkionic2ionic3

Answer 1

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

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

HTML

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

堆栈闪电战示例