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

Question

这是我的 html 图片模板，header 我想对齐图片旁边的文字

  <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

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

How to place title in the middle of image in ion slides in Ionic 3?

ionic-framework

ionic2

ionic3