CODEWITHSUNDEEP
reactjsmaterial-ui
sandeep pradhan
sandeep pradhan

Reputation: 271

Material-UI Typography doesn't center in Tool Bar

I'm trying center the text in an AppBar. I've tried centering the text in Typography element, using align="center", textAlign="center", and style={{ align: "center" }}, justify ="center" It still doesnot work. How do I centre the text?

              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>

Upvotes: 0

Views: 2439

Answers (2)

Khabir
Khabir

Reputation: 5842

align='center' should be the solution but you have to use 100% width of parent element.

Update:

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

Please check this Code Sandbox

Upvotes: 0

Hari
Hari

Reputation: 136

Typography in material itself has align as prop

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

Upvotes: 2

Related Questions