离子对齐图像

Question

我想把图像对齐到离子-歌元素的底部。以下是代码：

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

​

我可以使用docs：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>