在本节中,我们将看到如何使用 react js 在 mui 5 中排版文本中心。有两种方法可以在 mui 5 中居中文本,首先可以使用内联 react css,其次使用 mui 5 道具。

查看

React MUI 5 排版文本居中对齐

1. 使用 Inline react css 的 MUI 5 文本中心。

import { Typography } from '@mui/material';

export default function Home() {
  return (
    <>
      <Typography variant="h5" style={{ textAlign: 'center' }}>
        React MUI 5 Text Align Center Using Inline CSS
      </Typography>
    </>
  );
}

进入全屏模式 退出全屏模式

1)MUI 5 文本中心使用 React MUI 5 Props。

import { Typography } from '@mui/material';

export default function Home() {
  return (
    <>
      <Typography variant="h5" align="center">
        React MUI 5 Text Align Center
      </Typography>
    </>
  );
}

进入全屏模式 退出全屏模式

另请阅读

1.安装和设置 Vite + React + Typescript + MUI 5

2.React MUI 5 404 页面示例