如何居中 IonDateTime 组件 React

问：

我尝试过textAlign，alignContent，alignSelf，margin auto，但似乎没有任何效果。我只是想将数据时间选择器组件居中放在屏幕中央。

import { IonList, IonIcon, IonButton, IonItem, IonInput, IonContent, IonTitle, IonCard, IonCardContent, IonDatetime, IonCardHeader, IonCardSubtitle, IonCardTitle, IonImg } from '@ionic/react';
import './Tab1.css';
import Loading from './Loading';
import { useState } from 'react';


import { send } from 'ionicons/icons'


const PromoCreate: React.FC = () => {

    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [date, setDate] = useState('');


    return (
        <IonContent className='ion-padding'>
            <form>
                <IonList>
                    <IonItem>
                        <IonInput label="Title" onIonInput={(e: any) => setTitle(e.target.value)} value={title}></IonInput>
                    </IonItem>
                    <IonItem>
                        <IonInput onIonInput={(e: any) => setDescription(e.target.value)} value={description} label="Promo Description"></IonInput>
                    </IonItem>
                </IonList>
                <div style={{ alignItems:"center" }}>
                    <IonDatetime onIonChange={(e: any) => setDate(e.target.value)} presentation='date' preferWheel={true} max='2050'></IonDatetime>
                </div>
                <div style={{ textAlign: "center" }}><IonButton>Save and Send Out<IonIcon icon={send}></IonIcon></IonButton></div>
            </form>

            <br /><br />
            <div style={{ textAlign: "center" }}> <IonTitle>Promotion Preview</IonTitle></div>

            <IonCard>
                <img alt="Silhouette of mountains" src="Logo-02.svg" />
                <IonCardHeader className='promocard'>
                    <IonCardTitle>{title}</IonCardTitle>
                    <IonCardSubtitle>Expires {date}</IonCardSubtitle>
                </IonCardHeader>

                <IonCardContent>{description}</IonCardContent>
            </IonCard>
            <Loading />
        </IonContent>
    );
}


export default PromoCreate;

我尝试了所有与周围 div 的对齐选项，但没有任何效果。这似乎适用于我尝试过的所有其他组件。注意：除非不可能，否则我更喜欢内联我的东西。