Выровняйте изображение по центру в сетке.

Question

Я использую Grid из Материал UI . Я не знаю, почему изображение внутри элемента сетки выровнено по левому краю, а не по центру.

    <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 / Сетка