Html Ionic ReactJS Flex 的垂直居中不适用于 Ionic

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;

<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>

Html相关问答推荐

我已经在我的网站上创建了按钮，但我不能让它们正确排列.'

如何在angular 17.2中使用routerLink解决此错误

如何使用css实现悬停时的动画zoom ？

<；img>；和具有负边距的元素的堆叠顺序

如何阻止Chromecast图标出现在HTML5视频

使用响应迅速的网格系统，将两列保持在同一行，同时允许更多列用于更大的屏幕

每个元素的CSS网格高度相等，以保持响应性

如果DIV没有特定的sibling 姐妹，则以CSS为目标

尽管div高度为100%，div中的内容仍会溢出

当文本添加到元素中时，将元素拉到页面上

将导航项目底部边框与导航栏对齐

如何使不断增长的div不溢出其包含固定div的父级

减小HTML负载中base64字符串的大小

使用不同字体对齐元素

如何检测输入字段是否没有必填且没有占位符？

我真的需要一个容器来让行和列正常工作吗？ ( bootstrap 程序 v5)

Tailwind 网格行高度可防止拉伸到最高行的所有相同高度

如何将第一个 p 标签放在其下方第二个 p 标签的中间

标题之间和之后的 Hr 线

如何阻止网格项目拉伸？