Align typography text to center

Question

I am trying to align the text in the center by using <Typography align="center"> for the footer but it is not working. How can I align the text to 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

Aligning text inside typography won't help coz its width would only span till the content which would not bring it in center of footer element.

You need to handle it from footer component which is its parent by using flex as I have done below.

  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>
  );
}

Using flex would bring all the content of footer in center,If you wish to have only Visit again in center this can be achieved by wrapping it up into a div and applying the same CSS that of footer

Answer 2

This Code Working for me.

 flexGrow: 1,
 textAlign: "center"

Try This

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>
  );
}

Working Code Sandbox Link: https://codesandbox.io/s/falling-dawn-y8mb2?file=/src/App.js

Screenshot: