Question

您能告诉我如何将头像图像居中吗？我已经尝试过text-center，align-self-center等。但是它们都不起作用。我可以像这样使用margin-left:20px。但是您知道一种更好的响应方式吗？

<ion-row>
      <ion-col size="4">
        <ion-avatar>
          <img src="assets/images/male.jpg">
        </ion-avatar>
      </ion-col>
      <ion-col size="8">
        <ion-button color="tertiary" shape="round" (click)="updateProfilePicture()"
          text-capitalize>Choose a new photo
        </ion-button>
      </ion-col>
    </ion-row>

更新：

由于存在重复的解决方案，因此完全没有效果。

ion-avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

这是可行的解决方案：

.scss

.center-avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.html

<ion-row>
      <ion-col size="4" class="center-avatar">
        <ion-avatar>
          <img src="assets/images/male.jpg">
        </ion-avatar>
      </ion-col>
      <ion-col size="8">
        <ion-button color="tertiary" shape="round" (click)="updateProfilePicture()"
          text-capitalize>Choose a new photo
        </ion-button>
      </ion-col>
    </ion-row>

将头像图像置于Ionic 4网格列的中心

0 个答案: