Justify content class not working on ion row within grid

I’m trying to use ion grid and want my layout to be centered and for this I tried the class className="ion-justify-content-center" to ionRow as suggested. But it’s not working at all. Even though the css is working in the background.

Here is my code within component:

<IonGrid className="treatment-plan-content">

          <IonRow className="treatment-plan-backsplash">

            <IonGrid>

              <IonRow className="ion-justify-content-center">

                <IonCol>

                  <IonRow className="ion-justify-content-center">

                    <IonCol><h1>0</h1></IonCol>

                  </IonRow>

                  <IonRow className="ion-justify-content-center">

                    <IonCol><h2>Used Sessions</h2></IonCol>

                  </IonRow>

                </IonCol>

                <IonCol>

                  <IonRow className="ion-justify-content-center">

                    <IonCol><h1>7</h1></IonCol>

                  </IonRow>

                  <IonRow className="ion-justify-content-center">

                    <IonCol><h2>Package Sessions</h2></IonCol>

                  </IonRow>

                </IonCol>

              </IonRow>

              <IonRow>

                <IonCol>

                  <IonButton color="light" fill="clear">

                    <IonGrid>

                      <IonRow className="ion-justify-content-center">

                        <IonCol>Check Payment History</IonCol>

                        <IonCol><IonIcon icon={ arrowForwardOutline } /></IonCol>

                      </IonRow>

                    </IonGrid>

                  </IonButton>

                </IonCol>

              </IonRow>

            </IonGrid>

          </IonRow>

          <IonRow>

            <IonCol></IonCol>

          </IonRow>

        </IonGrid>

Here is my css:

.treatment-plan-content {

    padding: 0;

    width: 100%;

    .treatment-plan-backsplash {

        background-image: linear-gradient(rgba(0, 0, 0, 0.027), rgba(0, 0, 0, 0.7)), url(../../../assets/images/treatment-plan-backdrop.png);

        background-size: cover;

        width: 100%;

        h1, h2, h3, h4 {

            color: white;

            text-shadow: 2px 3px 5px rgba(0,0,0,0.3);

        }

    }

}

2 posts - 1 participant

Read full topic