Material UI - 将图标与排版文本居中对齐

Question

如何将图标对齐到与文本相同的水平。 截至目前，我看到图标位于文本的顶部。 我尝试使用padding-top: 5px和margin-top: 5px但这似乎没有按预期工作。

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

我使用Stackblitz创建了一个工作示例。 有人可以帮忙吗？

Answer 1

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

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

Answer 2

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

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

Answer 3

只需在您的内联图标上执行fontSize="inherit" ，例如： <FaCamera fontSize="inherit" />

Answer 4

<Typography variant="h2">
  Photography <FaCamera  style={{verticalAlign:"middle"}}/>
</Typography>

您可以尝试内联样式“verticalAlign”，它对我有用。

Answer 5

从@mui/icons-material导入图标时，我遇到了同样的问题。

设置fontSize: 'inherit'使图标与字体大小相同。 仍然存在轻微的垂直 alignment 问题，我可以通过使用verticalAlign: 'text-top'来解决。

对我有用的代码是：

<Icon sx={{ fontSize: 'inherit', verticalAlign: 'text-top' }} />