將圖像與網格項目材質 UI 中的中心對齊

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>

同樣在 Typography 中，我必須使用textAlign來居中，但是如何對齊圖像？

Answer 1

嘗試給 Grid 包裝圖像， container屬性，然后通過向此容器添加justify="center"和/或alignItems="center"來使圖像alignItems="center" 。

Answer 2

將此代碼用於您的網格標簽。

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

我從Material UI文檔Material UI/Grid 中得到了這個