How to display text under ion-avatar in ionic 5? - ionic5

Question

In ionic 3 appliction, I use below code to display a group of images and the name of the image under the image.
<ion-list >
<ion-item>
<ion-row>
<ion-col *ngFor="let item of items">
<ion-avatar>
<img [src]="item.profilepic"/>
</ion-avatar>
<p>{{item.nameAbbreviation}}</p>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
I use the same code in ionic 5. But the display shows some diffences: the ion-avatar image's size becomes much larger and the space between image and text becomes much wider.
I made changes as below, then the image size becomes the same as in ionic 3, but the text is shown at the same line of the image.
<ion-list >
<ion-row>
<ion-col *ngFor="let item of items">
<ion-item>
<ion-avatar>
<img [src]="item.profilepic"/>
</ion-avatar>
<p>{{item.nameAbbreviation}}</p>
<ion-item>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
Can you tell me what is the correct code to display text under ion-avatar in ionic 5?

Answer 1

Hope you find your solution here.
Please use following code :
<ion-row style="border: 2px solid green">
<ion-col size="2">
<ion-avatar>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" style="border: 2px solid black;">
<span style="border: 2px solid red;">TExt Text Text</span>
</ion-avatar>
</ion-col>
<ion-col size="10" style="padding: 3em;"><b>IONAVATAR DEMO Image With Text</b></ion-col>
</ion-row>
Output :
RedBorder display the text and you can place your text content there.........!!!!!