css 材料UI -将图标与排版文本居中对齐

qltillow 于 2023-01-14 发布在其他

关注(0)|答案(5)|浏览(148)

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

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

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

css

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

5条答案

按热度按时间

ntjbwcob1#

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

你可以尝试内联样式“verticalAlign”，它对我很有效。

赞(0）回复(0）举报 2023-01-14

iyfamqjs2#

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

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

赞(0）回复(0）举报 2023-01-14

qq24tv8q3#

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

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

赞(0）回复(0）举报 2023-01-14

zrfyljdw4#

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

赞(0）回复(0）举报 2023-01-14

nbnkbykc5#

我在从@mui/icons-material导入图标时遇到了同样的问题。
设置fontSize: 'inherit'可以使图标与字体大小相同。仍然有一个轻微的垂直对齐问题，我可以通过使用verticalAlign: 'text-top'来解决。
对我有效的代码是：

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

赞(0）回复(0）举报 2023-01-14

我来回答

css 材料UI -将图标与排版文本居中对齐

5条答案

相关问题

热门标签

最新问答