如何在Ionic 3的离子幻灯片中将标题放在图像的中间？

Question

这是我的图片和标头的html模板，我想在该图片的旁边对齐t文本

  <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;
}

Working-demo