Search code examples
cssreactjsmaterial-uialignmentcenter

In material UI, how do I center a Button in the middle of my Grid item?

I'm using Material UI's Grid with my React 16.13.0 application. I want to center the content of a button in the middle of my row. So I came up with this

center: { alignItems: "center", width: "100%", }, halfRow: { width: "50%", }, ...

      <Grid item className={classes.halfRow}>
        <Button size="medium" onClick={startMission} className={classes.center}>
          <Grid container direction="row" spacing={1} style={{ width: "100%", alignItems: "center" }}>
            <Grid item>
              <PlayCircleFilledIcon />
            </Grid>
            <Grid item>START</Grid>
          </Grid>
        </Button>
      </Grid>

However, this isn't doing the job. The button seems to be aligning to the left ...

enter image description here

What's the right style that I should be applying to get everything to center in the middle of the cell?

Solution

  • Grid takes in justify and alignItems as a prop which you can pass to center your content

     <Grid item className={classes.halfRow}>
    <Button size="medium" onClick={startMission} className={classes.center}>
      <Grid container direction="row" spacing={1} alignItems={'center'} justify={'center' }style={{ width: "100%" }}>
        <Grid item>
          <PlayCircleFilledIcon />
        </Grid>
        <Grid item>START</Grid>
      </Grid>
    </Button>
  </Grid>