如何在 MUI Grid 项目中水平居中一个项目？

IT技术 css reactjs material-ui
2021-05-09 02:32:00

如何将元素居中放置在 MUIGrid项目中？这是我的 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>）但没有成功。

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

4个回答

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

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

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

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

这是正确的方法： 

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

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

网格 API

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

<Grid container justifyContent="center" alignItems="center">
其它你可能感兴趣的问题
上一篇SLA 打印：件不粘在支撑结构上 下一篇在 MUI 中设置排版文本颜色