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

【问题标题】：Material UI - Align icon to center with the Typography textMaterial UI - 将图标与排版文本居中对齐
【发布时间】：2021-01-18 14:04:24
【问题描述】：

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

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

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

【问题讨论】：

标签： css reactjs material-ui react-icons

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您无需任何 CSS 即可轻松使用 Grid 实现正确对齐。

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

【讨论】：

【解决方案3】：

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

你可以试试内联样式'verticalAlign'，它对我有用。

【讨论】：

【解决方案4】：

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

【讨论】：