Ionic Align 图像到 ion-col 的底部

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>

Ionic Align 图像到 ion-col 的底部

Ionic Align image to bottom of ion-col

sass

ionic-framework

ionic2

ionic3