1

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

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

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

4

4 回答 4

4

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

<Box>
  <Typography variant="h2">
    Photography <FaCamera style={{position: 'relative', top: '8px'}} />
  </Typography>
</Box>
于 2020-10-02T23:25:46.827 回答
1 
<Typography variant="h2">
  Photography <FaCamera  style={{verticalAlign:"middle"}}/>
</Typography>

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

于 2021-10-30T01:53:03.970 回答
1

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

<Grid container alignItems="center" spacing={2}>
   <Grid item>
      <Typography variant="h2">
         Photography
      </Typography>
   </Grid>
   <Grid item>
      <FaCamera />
   </Grid>
</Grid>
于 2020-10-02T23:37:04.857 回答
0

只需fontSize="inherit"在您的内联图标上执行以下操作：<FaCamera fontSize="inherit" />

于 2021-08-18T09:42:58.857 回答