[英]Ionic Align image to bottom of ion-col
I want to align the images to the bottom of the ion-col element. 我想将图像对齐到ion-col元素的底部。 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/ 我可以使用文档中所述的列属性来做到这一点: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.