Material UI - Align icon to center with the Typography text

问题

How do I align icon to the same level as the text. As of now, I see the icon is at little top to the text. I tried to use padding-top: 5px and also margin-top: 5px but that does not seem to work as expected.

  <Box>
    <Typography variant="h2">
      Photography <FaCamera />
    </Typography>
  </Box>

I created a working example using Stackblitz. Could anyone please help?

回答1:

You can easily use a Grid to achieve the correct alignment without the need for any CSS.

<Grid container alignItems="center" spacing={2}>
   <Grid item>
      <Typography variant="h2">
         Photography
      </Typography>
   </Grid>
   <Grid item>
      <FaCamera />
   </Grid>
</Grid>

回答2:

I was able to align it correctly using position and top properties of CSS.

<Box>
  <Typography variant="h2">
    Photography <FaCamera style={{position: 'relative', top: '8px'}} />
  </Typography>
</Box>

来源：https://stackoverflow.com/questions/64179266/material-ui-align-icon-to-center-with-the-typography-text