如何在页面上居中离子头像

Question

我正在尝试使用下面的代码将头像center ，但它不起作用。 我使用了从ionic 文档中获得的这个class="ion-align-items-center"但没有成功。

    <ion-grid style ="text-align: center">
     <ion-row class="ion-align-items-center" >

    <ion-col class="ion-align-items-center" *ngFor="let item of students" >
      <!--   <div  class= "imageHold" >
            <ion-img [src]= "profileImage || item.profileImage"></ion-img>
        </div> -->
        <ion-avatar class="ion-align-items-center">
            <ion-img [src]= "profileImage || item.profileImage"></ion-img>
          </ion-avatar>
    </ion-col>  
   </ion-row >
   <ion-row  style ="text-align: center">  
       <ion-col>
    <ion-button  size="small" fill="outline" (click)="chooseProfilePic()" >Choose Profile Photo</ion-button>
   </ion-col>
   </ion-row>
   </ion-grid>

我得到这个结果

Answer 1

在头像 div 中添加一个 class。

.avatar{
   margin: auto;
}