在材質 UI 中，如何將 Button 置於 Grid 項目的中間？

Question

我在我的 React 16.13.0 應用程序中使用 Material UI 的 Grid。 我想將按鈕的內容居中在我的行中間。 所以我想出了這個

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>

但是，這並沒有起到作用。 按鈕似乎向左對齊...

我應該應用什么正確的樣式以使所有內容都集中在單元格的中間？

Answer 1

Grid 接受justify和alignItems作為道具，您可以將其傳遞給您的內容居中

 <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>