如何在MUI网格项目中将项目水平居中？ [英] How to horizontally center an item in MUI Grid item?

问题描述

如何使MUIGrid项中的元素居中？下面是我的Reaction应用程序的一个片段：

<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>)，但没有成功。

我以为这会很简单，但我找不到任何有关网格项目内居中项目的信息。

推荐答案

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

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

如果有其他更"正确"的方法，请随时发布另一个答案。

这篇关于如何在MUI网格项目中将项目水平居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！