将排版文本居中对齐

Question

我试图通过使用<Typography align="center">页脚将文本对齐在中心，但它不起作用。如何将文本居中对齐？

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  appBar: {
    top: "auto",
    bottom: 0
  }
}));

export default function Footer() {
  const classes = useStyles();

  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar color="primary" className={classes.appBar}>
        <Toolbar>
          <Typography align="center">Visit again</Typography>
        </Toolbar>
      </AppBar>
    </React.Fragment>
  );
}

Answer 1

在排版中对齐文本不会有帮助，因为它的宽度只会跨越内容，而不会使其位于页脚元素的中心。

您需要使用 flex 从作为其父级的页脚组件处理它，就像我在下面所做的那样。

  const useStyles = makeStyles(theme => ({
  appBar: {
    top: "auto",
    bottom: 0,
    textAlign:"center"
  },
  footer: {
    display:"flex",
    justifyContent:"center",
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar color="primary" className={classes.appBar}>
        <Toolbar className={classes.footer}>
          <Typography align="center">Visit again</Typography>
        </Toolbar>
      </AppBar>
    </React.Fragment>
  );
}

使用 flex 会将页脚的所有内容置于中心，如果您只想在中心再次访问，可以通过将其包装到 div 中并应用与页脚相同的 CSS 来实现

Answer 2

这段代码对我有用。

 flexGrow: 1,
 textAlign: "center"

尝试这个

const useStyles = makeStyles((theme) => ({
  appBar: {
    top: "auto",
    bottom: 0
  },
  typo: {
    flexGrow: 1,
    textAlign: "center"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar color="primary" className={classes.appBar}>
        <Toolbar>
          <Typography className={classes.typo}>Visit again</Typography>
        </Toolbar>
      </AppBar>
    </React.Fragment>
  );
}

工作代码沙盒链接：https://codesandbox.io/s/falling-dawn-y8mb2 ?file=/src/App.js

截屏：