Align to the center of ion row

@Astrid5 wrote:

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:

Loading360×640 5.66 KB

but so far I got this:

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.

Posts: 1

Participants: 1

Read full topic