css - 如何水平居中 MUI 网格元素中的元素？

Question

如何在 MUI 中居中元素 Grid元素？这是我的 React 应用程序的一个片段:

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

我试过申请 alignContent , justify , alignItems (给父级 <Grid item>)没有成功。

我认为这会很简单，但我没能找到任何关于在网格元素中居中元素的信息。

Answer 1

两秒钟后...我通过一些简单的 CSS 解决了这个问题:

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

如果有另一种更“正确”的方法，请随时发布另一个答案。