如何在頁面上居中離子頭像

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;
}