在 material UI 中，我如何将 Button 置于我的 Grid 项目中间？

Question

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

中心：{ 对齐项："center"，宽度：“100%”， }, 半行：{ 宽度：“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 and alignItems as a prop，您可以将其传递到中心内容

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

在 material UI 中，我如何将 Button 置于我的 Grid 项目中间？

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

css

center

alignment

reactjs

material-ui