在 Grid 项目 Material UI 中将图像与中心对齐答案

【问题标题】：Align image to the center in Grid item Material UI在 Grid 项目 Material UI 中将图像与中心对齐
【发布时间】：2020-05-21 14:37:47
【问题描述】：

我正在使用来自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>

同样在 Typography 中，我必须使用 textAlign 居中，但是如何对齐图像？

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
谢谢@Paulie_D，我编辑了代码

标签： css reactjs material-ui

【解决方案1】：

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

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

我从材料 ui 文档 Material UI/Grid 得到这个

【讨论】：

【解决方案2】：

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

【讨论】：