材质用户界面-将图标与印刷文字对齐

Question

如何将图标与文本对齐。到目前为止，我看到该图标位于文本的顶部。我尝试使用padding-top: 5px和margin-top: 5px，但似乎无法按预期工作。

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

我使用Stackblitz创建了一个工作示例。谁能帮忙吗？

Answer 1

您可以轻松地使用Grid来实现正确的对齐，而无需任何CSS。

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

Answer 2

我能够使用CSS的position和top属性正确对齐它。

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