时间戳

首页 > 解决方案 > 如何在所有卡片中设置文本对齐

html - 如何在所有卡片中设置文本对齐

问题描述

我正在使用带有离子的角度，我想将所有卡片中的文本对齐和图像设置为相等，并使用 add 和 + 和 - 按钮设置按钮。但我没有得到我的结果。这是我的结果。 这是我的结果

但我想要这样的页面 但我想要这样

我不知道如何创建这样的按钮。请帮我。如果有人可以提供帮助，请帮助我解决此问题。

.serviceList{
        padding: 0px 10px;

        .card{
            display: flex;
            width: 100%;
            flex-direction: row;
            border-radius: 10px;
            box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
            margin: 15px 0px;
            position: relative;

            .image_div{
                // border-radius: 10px;
                background-position: center;
                background-repeat: no-repeat;
                background-size:  100px;
                width: 150px;
                height: 100px;

            }
            .desc_div{
  
                padding: 10px;
                .heading_lbl{
                    font-size: 20px;
                    display: block;
                    text-align: left;
                }
                .small_lbl{
                    font-size: 13px;
                    color: var(--ion-color-secondary);
                    display: block;
                    text-align: left;
                }
                .small_pricing{
                    font-size: 12px;
                    color: var(--ion-color-dark);
                    display: block;
                    text-align: left;
                }
   
                .tick{
                    width: 25px;
                    position: absolute;
                    right: 15px;
                    top: 10px;
                }
            }
        }
    }

<div class="serviceList">
      <div class="card" *ngFor="let item of services" (click)="add(item)">
        <div class="image_div" [style.backgroundImage]="'url('+ item.image +')'"></div>
        <div class="desc_div">
          <ion-label class="heading_lbl">{{item.name}}</ion-label>
          <ion-label class="small_pricing">starting at <span style="font-weight: 600;">$ {{item.price}}</span></ion-label>
          <ion-label class="small_pricing">{{item.time}}</ion-label>
          <img *ngIf="selected.includes(item)" src="assets/imgs/correct.png" class="tick" alt="">
        </div>
      </div>
    </div>

标签： htmlcssangularionic-frameworksass

解决方案

您可以使用 img element 代替添加背景图像。

.card-img {
  width: 150px;
}

.card {
    display: flex;
    width: 100%;
    flex-direction: row;   
    padding: 25px 0px;
    border-bottom: 1px solid blue
  }
  .serviceList {
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
    margin: 15px 0px;
    position: relative;
    
  }
  
<div class="serviceList">
  <div class="card">
    <img class="card-img" src="https://4.imimg.com/data4/XM/BT/MY-14977507/multigrain-atta-large-800x800-500x500.jpg">
  <div class="desc_div">
    <label>Aashirwad Atta</label>
  </div>
  </div>
  <div class="card">
    <img class="card-img" src="https://image.shutterstock.com/image-photo/basmati-rice-bag-600w-1338597242.jpg">
  <div class="desc_div">
    <label>Aashirwad Atta</label>
  </div>
  </div>
<div>

不要给图像高度，因为它不能正常工作，不支持响应，而且有机会拉伸/收缩图像，它看起来不会很好。

推荐阅读