I have an issue with ion-icon styling

This is my code and also i am attaching the result i got, but it’s too long and it’s hard to control the alignment of the title to the center of the image or icon… please if there is a better way of handling this to get my previous image result, I would really appreciate it.

        <IonRow>

style323×510 11.4 KB

            <IonThumbnail>

              <img

                alt='card'

                src='https://firebasestorage.googleapis.com/v0/b/everpark-bf690.appspot.com/o/bank.png?alt=media&token=8916f9e6-3323-45f7-b8f1-92689344d23e'

              ></img>

              <p>Card</p>

            </IonThumbnail>

          </IonCol>

          <IonCol class='align-items-center'>

            <IonThumbnail>

              <img

                alt='card'

                src='https://firebasestorage.googleapis.com/v0/b/everpark-bf690.appspot.com/o/money.png?alt=media&token=01708c8b-1287-42c9-b8c2-61898a639fdc'

              ></img>

              <p>Cash</p>

            </IonThumbnail>

          </IonCol>

          <IonCol class='align-items-center'>

            <IonThumbnail>

              <img

                alt='barcode'

                src='https://firebasestorage.googleapis.com/v0/b/everpark-bf690.appspot.com/o/qr-code.png?alt=media&token=0a9cbde2-771a-431d-82e7-5c85c18cc1f6'

              ></img>

              <p>Barcode</p>

            </IonThumbnail>

          </IonCol>

        </IonRow>

      </IonCol>