如何在页面上居中离子化身

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

在头像中添加一个classdiv。

.avatar{
   margin: auto;
}

如何在页面上居中离子化身

How to center ionic avatar on a page

html

css

ionic-framework

ionic4