css - ionic 卡上带有叠加文字的图像？

Question

我是 Ionic 的新手，我有一个在文档中找不到的简单问题。

有没有什么方法可以使用 Ionic 类来简单地将“Disc 20%”文本对齐到图像的中心？

类似于这张图片:

我目前的代码是:

<ion-content class="card-background-page">
  <ion-card *ngFor="let periode of items" (click)="dismiss(periode)">
    <ion-list>
      <div class="item item-input-inset">
        <button ion-item class="item item-input-wrapper" value="{{periode.Productid}}">
          <ion-avatar item-start>
            <img src="assets/imgs/home/bgCashback.png" style="border-radius:0%;width:72px;height:72px;">
          </ion-avatar>
          <div class="card-img">Disc 20%</div>
          <div class="card-title" style="color:#838383;font-size:13px;font-weight:400">
            {{ periode.title_promo }}
          </div>
          <div text-wrap class="card-subtitle" style="color:#9c9c9c;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;font-size: 12px;">
            {{ periode.description }}
          </div>
        </button>
      </div>
    </ion-list>
    <ion-row>
      <ion-col></ion-col>
      <ion-col>
        <ion-note>Valid Until: {{ periode.end_date | date: 'dd MMM yyyy' }}</ion-note>
      </ion-col>
    </ion-row>
  </ion-card>

和 scss:

card-background-page {
    .ion-card {
        position: relative;
        text-align: center;
    }

    .card-img {
        position: absolute;
        top: 36%;
        font-size: 2.0em;
        width: 100%;
        font-weight: bold;
        color: #fff;
      }
}

Answer 1

你可以试试下面的 ionic 和 CSS。不要使用内联 CSS。

ionic 代码:

<ion-content class="card-background-page">
  <ion-card *ngFor="let periode of items" (click)="dismiss(periode)">
    <ion-list>
      <div class="item item-input-inset">
        <button ion-item class="item item-input-wrapper" value="{{periode.Productid}}">
          <ion-avatar style="background: url("assets/imgs/home/bgCashback.png"); item-start>
            <div class="card-img">Disc 20%</div>
          </ion-avatar>
          <div class="card-desc-cvr">          
            <div class="card-title">
              {{ periode.title_promo }}
            </div>
            <div text-wrap class="card-subtitle">
              {{ periode.description }}
            </div>
         </div>
        </button>
      </div>
    </ion-list>
    <ion-row>
      <ion-col></ion-col>
      <ion-col>
        <ion-note>Valid Until: {{ periode.end_date | date: 'dd MMM yyyy' }}</ion-note>
      </ion-col>
    </ion-row>
  </ion-card>
</ion-content>

CSS:

.card-background-page {
 .ion-card {
        position: relative;
        text-align: center;
    }      

    ion-avatar{
      float: left;
      text-align: center;
      vertical-align: middle;
      width: 72px;
      height: 72px;
      line-height: 72px;
      background-size: 72px 72px;     
    }

    .card-desc-cvr{
       float: left;
      }

      .card-subtitle{
        color:#9c9c9c;
        margin: 0px;
        font-size: 12px;
      }

      .card-title{
        color:#838383;
        font-size:13px;
        font-weight:400
      }
}