CODEWITHSUNDEEP
cssreactjsmaterial-ui
Duncan Jones
Duncan Jones

Reputation: 69410

How to horizontally center an item in Material UI Grid item?

How do I center elements inside a Material UI Grid item? Here is a snippet from my React application:

<Grid container>
  <Grid item xs={4}>
    // Unrelated stuff here
  </Grid>
  <Grid item xs={4}>
    // How do I centre these items?
    <IconButton className={classes.menuButton} color="inherit">
      <EditIcon/>
    </IconButton>
    <IconButton className={classes.menuButton} color="inherit">
      <CheckBoxIcon/>
    </IconButton>
  </Grid>
  <Grid item xs={4}>
    // Unrelated stuff here
  </Grid>
</Grid>

I've tried applying alignContent, justify, alignItems (to the parent <Grid item>) with no success.

I thought this would be quite simple, but I've failed to find any information on centering items inside of grid items.

Upvotes: 42

Views: 56548

Answers (4)

NearHuscarl
NearHuscarl

Reputation: 81803

In MUI v5, according the the migration guide, The justify prop of Grid is renamed to justifyContent to align with the CSS property name:

<Grid container justifyContent="center" alignItems="center">

Upvotes: 7

Bhary
Bhary

Reputation: 569

 <Grid container  className = {classes.root} align = "center" justify = "center" alignItems = "center"  >
            <CssBaseline/>
            <Grid item xs = {false} sm = {4} md = {6}>

            </Grid>
            <Grid item xs = {12} sm = {4} md = {6}>

            </Grid>
        </Grid>`enter code here`

Upvotes: 30

Juan David Arce
Juan David Arce

Reputation: 902

This is the correct way: 

<Grid container item xs={4} justify="center">

if container property is set to true the component will have the flex container behavior.

Grid API

Upvotes: 25

Duncan Jones
Duncan Jones

Reputation: 69410

Two seconds later... I solved this through some simple CSS:

<Grid item xs={4} style={{textAlign: "center"}}>
</Grid>

If there is another approach that is somehow more "correct", please feel free to post another answer.

Upvotes: 42

Related Questions