垂直和調整大小

Question

後化身圖像的水平中心我有以下代碼顯示小替身：

<ion-avatar *ngFor="let user of item.users;"> 
    <img src="{{ user.avatar }}" style="max-width:2.5rem; max-height:2.5rem;"> 
</ion-avatar> 

，因爲它似乎，離子化身的默認大小是上4rem 4rem。 結果是化身與一個更大的容器的左上角對齊（這對我來說很好 - 化身之間的間距）。

如何使圖像處於離子探測器的中心？

Answer 1

你需要設置margin: auto;在*.scss

在* .component.ts

<ion-avatar class='avatar' *ngFor="let user of item.users;"> 
    <img src="{{ user.avatar }}" style="max-width:2.5rem; max-height:2.5rem;"> 
</ion-avatar> 

在* .component.scss

.avatar img { 
    margin: auto; 
} 

Answer 2

您可以創建一個類您的img標籤如下所示

<img class="myavt" src="{{ user.avatar }}" style="max-width:2.5rem; max-height:2.5rem;"> 

在你頂嘴頁

.myavt{ 
      left: 50%; 
     transform: translate(-50%,-50%); 
}