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

Question

I am using Grid from Material UI . I dont know why image inside Grid item is align to the left and not to the center.

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

Also inside Typography I have to use textAlign to be in the center, but how to align an image?

Answer 1

尝试给 Grid 包装图像， container属性，然后通过向此容器添加justify="center"和/或alignItems="center"来使图像alignItems="center" 。

Answer 2

use this code intoyour grid tag.

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

i got this from material ui docs Material UI/Grid