Question

如何在Material UI Grid项内居中放置元素？这是我的React应用程序中的一个片段：

->diff

我尝试将<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）没有成功。

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

Answer 1

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

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

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

Answer 2

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

这是正确的方法：

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

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

Grid API

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

3 个答案: