How to align an ion-avatar inside an ion-col

Question

I am developing a simple app with Ionic v4 framework, and I have an ion-grid like this:

<ion-grid>
    <ion-row>
        <ion-col *ngFor="let item of items">
            <ion-avatar>
                <img src="{{item.getItemImgUrl()}}" />
            </ion-avatar>
        </ion-col>
    </ion-row>
    <ion-row>
        ..........
    </ion-row>
</ion-grid>

May anyone tell me how I can align the ion-avatar exactly in the center of the ion-col?

I've tried text-align: center; in my css sheet, but it doesn't work.

Thanks a lot!

Answer 1

I had the same problem. I solved it by using

<ion-col style="display: flex; justify-content: center">