如何在材質(zhì)UI網(wǎng)格項目中居中元素？下面是我的React應(yīng)用程序的一個片段:

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

我已經(jīng)嘗試將alignContent、justify、alignItems(應(yīng)用于父& lt網(wǎng)格項目& gt)沒有成功。

我認(rèn)為這很簡單，但是我沒有找到任何關(guān)于在網(wǎng)格項目中居中項目的信息。

兩秒鐘后...我通過一些簡單的CSS解決了這個問題:

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

如果有更“正確”的方法，請隨意發(fā)布另一個答案。

這是正確的方法:

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

如果容器屬性設(shè)置為true，組件將具有flex 容器行為。

網(wǎng)格API

在MUI v5中，根據(jù)遷移指南，網(wǎng)格的justify屬性被重命名為justifyContent，以與CSS屬性名稱保持一致:

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