材质用户界面-对齐图标以使“版式"文本居中 [英] Material UI - Align icon to center with the Typography text

问题描述

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

How do I align icon to the same level as the text. As of now, I see the icon is at little top to the text. I tried to use padding-top: 5px and also margin-top: 5px but that does not seem to work as expected.

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

我使用 Stackblitz .谁能帮忙吗?

推荐答案

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

I was able to align it correctly using position and top properties of CSS.

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

这篇关于材质用户界面-对齐图标以使“版式"文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！