Как разместить заголовок в середине изображения на ионных слайдах в Ionic 3?

Question

Вот мой HTML-шаблон моего изображения и заголовка. Я хочу выровнять текст по сторонам этого изображения

  <ion-slides   *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true"> 
  <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

Вы можете использовать ионную карту

html

<ion-slides   *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true"> 
   <ion-slide *ngFor="let item of getData" (click)="openItem(item)"> 
     <ion-card class="myCard">
       <img src="{{item.jetpack_featured_media_url}}" class="new-collection"/> 
         <div class="myOverlay">
           <div class="card-title">{{ item.title.rendered }}</div>
           <div class="card-subtitle">{{ some subtitle you like }}</div>
         </div>
      </ion-card>
    </ion-slide>
 </ion-slides>

И некоторые стили

css

img{
  width:100%;
  height:100%;
}

.myCard{
  position:relative;

}

.myOverlay{
  width: 100%;
  height: 40%;
  padding-top:5%;
  text-align: center;
  position: absolute;
  z-index: 99;
  bottom: 20%;
  opacity: 0.5;
  color: white;
  font-weight: bold;
  background-color: black;
}

Рабочая демоверсия