Break line with <img> and <p> inside an <ion-button> - IONIC 5

Question

I have the following HTML:

<ion-grid fixed>
  <ion-row>
    <ion-col size="12">

      <ion-button (click)="go('adopt')" class="button" color="dark">
        <img src="./assets/images/pet-shelter.webp" alt="">
        <p>{{ 'HOME.CALL-ADOPT' | translate }}</p>
      </ion-button>

      <ion-button (click)="go('register')" class="button" color="dark">
        <img src="./assets/images/register.webp" alt="">
        <p>{{ 'HOME.CALL-REGISTER' | translate }}</p>
      </ion-button>

    </ion-col>
  </ion-row>
</ion-grid>

CSS:

img {
    width: 70px;
}

ion-button {
    width: 100%;
    height: 220px;
}

I would like the image to be up in the middle and the text below, but they are on the same line.

How they get:

Answer 1

Thales, use a div for each element to be able to manipulate them more easily.

<ion-button (click)="go('adopt')" class="button" color="dark">
  <div class="content-container">
    <div class="imagem">
      <img src="./assets/images/pet-shelter.webp" alt="">
    </div> <!-- imagem -->
    <div class="paragrafo">
      <p>{{ 'HOME.CALL-ADOPT' | translate }}</p>
    </div> <!-- paragrafo -->
  </div> <!-- content-container -->
</ion-button>

With this you can manipulate CSS using flex display and align the elements the way you want them.

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

Only pay attention to the image dimensions and the dimensions of each element’s Ivs so that no element overlaps each other.