離子對准圖像至離子柱底部

Question

我想將圖像對齊到ion-col元素的底部。 這是代碼：

 <ion-grid>
<ion-row>
  <ion-col col-6>
    <img src="assets/imgs/mobile-icon.png" />
  </ion-col>
  <ion-col col-6>
    <img src="assets/imgs/laptop-icon.png" />
  </ion-col>
</ion-row>
<ion-row>
  <ion-col class="object-label" col-6>
    Smartphone
  </ion-col>
  <ion-col class="object-label" col-6>
    Ordinateur
  </ion-col>
</ion-row>
<ion-row>
  <ion-col col-6>
    <img src="assets/imgs/tablet-icon.png" />
  </ion-col>
  <ion-col col-6>
    <img src="assets/imgs/camera-icon.png" />
  </ion-col>
</ion-row>
<ion-row>
  <ion-col class="object-label" col-6>
    Tablette
  </ion-col>
  <ion-col class="object-label" col-6>
    Appareil photo
  </ion-col>
</ion-row>
<ion-row>
  <ion-col col-6>
    <img src="assets/imgs/headphones-icon.png" />
  </ion-col>
  <ion-col col-6>
    <img src="assets/imgs/other-icon.png" />
  </ion-col>
</ion-row>
<ion-row>
  <ion-col class="object-label" col-6>
    Accessoires
  </ion-col>
  <ion-col class="object-label" col-6>
    Autres
  </ion-col>
</ion-row>

我可以使用文檔中所述的列屬性來做到這一點： https : //ionicframework.com/docs/api/components/grid/Col/

但由於某種原因，它無法正常工作。

Answer 1

它對我來說很好。 請檢查一下

<ion-grid>

      <ion-row>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/mobile-icon.png" />
          </div>
        </ion-col>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/laptop-icon.png" />
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="object-label" col-6>
          Smartphone
        </ion-col>
        <ion-col class="object-label" col-6>
          Ordinateur
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/tablet-icon.png" />
          </div>
        </ion-col>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/camera-icon.png" />
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="object-label" col-6>
          Tablette
        </ion-col>
        <ion-col class="object-label" col-6>
          Appareil photo
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/headphones-icon.png" />
          </div>
        </ion-col>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/other-icon.png" />
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="object-label" col-6>
          Accessoires
        </ion-col>
        <ion-col class="object-label" col-6>
          Autres
        </ion-col>
      </ion-row>
    </ion-grid>