2

On this Ionic / ReactJS project you can try by yourself on Stackblitz:

https://stackblitz.com/edit/ionic-react-routing-ctdywr?file=src%2Fpages%2FGreetings.tsx

I have the follwing code:

import React from 'react';
import { IonButton, IonContent, IonPage } from '@ionic/react';

const Greetings = () => {
  return (
    <IonPage className="loginPage">
      <IonContent fullscreen>
        <div
          className="container"
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <IonButton>Say Hello</IonButton>
          <IonButton>Say World</IonButton>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Greetings;

which renders the following DOM content and CSS:

enter image description here

My problelm is: I was expecting that the buttons inside were vertically and horizontally aligned, however I get what you can see on the image below:

enter image description here

where you can see that the buttons are aligned to the top.

Any idea on how to solve this issue?

Thanks!

davidesp
  • 3,743
  • 10
  • 39
  • 77

1 Answers1

0

A well-asked question with a simple answer.

You are missing IonRow and height 100% as shown in this fork.

<IonPage className="loginPage">
      <IonContent fullscreen>
        <IonRow
          className="container"
          style={{
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <IonButton>Say Hello</IonButton>
          <IonButton>Say World</IonButton>
        </IonRow>
      </IonContent>
    </IonPage>