如何在Material UI网格项目中将项目水平居中？

Question

如何在Material UI 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

 <Grid container  className = {classes.root} align = "center" justify = "center" alignItems = "center"  >
            <CssBaseline/>
            <Grid item xs = {false} sm = {4} md = {6}>

            </Grid>
            <Grid item xs = {12} sm = {4} md = {6}>

            </Grid>
        </Grid>`enter code here`

Answer 2

这是正确的方法：

<Grid container item xs={4} justify="center">

如果容器属性设置为 true，则组件将具有 flex 容器行为。

网格 API

Answer 3

在MUI v5中，根据迁移指南， 的justifypropGrid被重命名为justifyContent与 CSS 属性名称对齐：

<Grid container justifyContent="center" alignItems="center">

Answer 4

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

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

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