I want to align the images to the bottom of the ion-col element. Here is the code:
<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>
I could do it using column attributes stated in the docs: https://ionicframework.com/docs/api/components/grid/Col/
but for some reason it's not working.
Its working fine for me. Please check it
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.