Align to the center of ion row

Ionic Framework ionic-v3
1

Hey, I have an issue that I’m pretty sure that is simple but as I’m new to Ionic, I don’t know how to solve it. I have to reproduce the following screen:

Loading
Loading360×640 5.66 KB

but so far I got this:

image
image298×533 10 KB

I have to center the title and the image, but nothing seems to work. Here’s my HTML and SCSS:

<ion-content (click)="modalCtrl.dismiss()">
    <ion-row class="search-image ion-justify-content-center">
      <ion-col>
        <p> Procurando eventos próximos</p>
        <ion-img [src]="'/assets/official-images/loading.svg'"></ion-img>
      </ion-col>
    </ion-row>
</ion-content>


ion-content {
  --background: #FF9009;
}

.search-image {

  ion-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  p {
    font-family: "Futura Bk BT", sans-serif !important;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.4px;
    color: #FFFFFF;
  }
}

any tips…? Thanks everyone.

2

You should be able to do this with the CSS classes I posted in this thread.

3

try to add these css lines in your .search-image class i hope its work for you

.search-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
4

it works but I had to add height: 100% as well, anyway thanks for answering!

5

thank you so much, It works like a charm :star_struck: