资料-用户界面排版不以工具条为中心

Question

我正在尝试将文本集中在AppBar中。我试着在排版元素中对文本进行居中，使用align="center“、textAlign="center”和style={ align：“中间”}、style= ="center“--它仍然不起作用。我该怎么把课文集中起来？

              return (
               <MuiThemeProvider theme={theme}>
               <React.Fragment>
              <div alignItems="center" justify="center">
               <AppBar position="static">
                 <Toolbar>
                 <Typography style={{ align: "center" }}>
                  Best Practices Management System
                  </Typography>
                  </Toolbar>
                  </AppBar>
                   </div>

Answer 1

align='center'应该是解决方案，但您必须使用父元素的100%宽度。

更新：

import React from 'react';
import Typography from '@material-ui/core/Typography';
import {makeStyles} from '@material-ui/core/styles';
import {MuiThemeProvider} from "@material-ui/core";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar"
import { createMuiTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';

const useStyles = makeStyles({
    root: {
        width: '100%',
        maxWidth: 500,
    },
});


const theme = createMuiTheme({
  palette: {
    primary: blue,
  },
});

export default class TypographyExamples extends React.Component {
    render() {
        const {values, handleChange} = this.props;
        return (
            <MuiThemeProvider theme={theme}>
                <React.Fragment>
                    <div className={useStyles.root}>
                        <AppBar position="static">
                            <Toolbar>
                                <Typography gutterBottom align="center" style={{width: "100%", alignItems: "center"}}> abc </Typography>
                            </Toolbar>
                        </AppBar>
                    </div>
                </React.Fragment>
            </MuiThemeProvider>
        );
    }
}

请检查此代码沙箱

Answer 2

材料本身的排版就像支柱一样对齐

<Typography align='center'>
    Best Practices Management System
</Typography>