在材料界面中，如何将一个按钮居中于网格项目的中间？

Question

我在我的React 16.13.0应用程序中使用Material UI的网格。我想将按钮的内容放在行中间。所以我想出了这个

中心：{alignItems：“居中”，宽度：“ 100％”，}，halfRow：{宽度：“ 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

网格将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>