Question

我正在使用Material UI中的Grid。我不知道为什么Grid项内的图像向左对齐而不是向中心对齐。

    <Grid container direction="row" justify="center" alignItems="center">
      <Grid item xs={6}>
        <Grid container direction="row" justify="center" alignItems="center" alignContent="center" style={{minHeight:"200px"}} >
            <Grid item xs={12}>
              <Typography style={{color:'white', textAlign:'center', fontSize:'2rem'}}>{name}</Typography>
            </Grid>
            <Grid item xs={6}>
              <a href={github} target="_blank">
                <img src={githubIcon} width="32px" height="32px" color="white"/>
              </a>
            </Grid>
        </Grid>
      </Grid>
    </Grid>

在排版里面，我还必须使用textAlign居中，但是如何对齐图像？

Answer 1

尝试为包装图像的网格提供container属性，然后通过向该容器中添加justify="center"和/或alignItems="center"来居中图像。

Answer 2

将此代码用于您的网格标签。

alignContent ='flex-start'alignItems ='flex-start'justify ='flex-start'

我是从重要的ui文档Material UI/Grid

中获得的

将图像与网格项“材质” UI中的中心对齐

2 个答案: