html - 如何在页面上居中 ionic 化身

Question

我正在尝试使用下面的代码将 center avatar 放在中间，但它不起作用。我已经使用了从 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;
}