Feel free to experiment with this Ionic / ReactJS project on Stackblitz:
https://stackblitz.com/edit/ionic-react-routing-ctdywr?file=src%2Fpages%2FGreetings.tsx
Here is the code snippet:
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;
This code generates the following DOM content and CSS:
https://i.sstatic.net/VXXcj.png
The issue I'm facing: The buttons are supposed to be vertically and horizontally aligned but they appear differently as shown in the image below:
https://i.sstatic.net/1O3CQ.png
As you can see, the buttons are aligned at the top instead. Any suggestions on how to fix this?
Thank you!