如何将图标与文本对齐。截至目前，我看到图标位于文本的顶部。我尝试使用padding-top: 5pxand ，margin-top: 5px但似乎没有按预期工作。
<Box>
<Typography variant="h2">
Photography <FaCamera />
</Typography>
</Box>
我使用Stackblitz创建了一个工作示例。有人可以帮忙吗？
Material UI - 将图标与排版文本对齐
IT技术
css
reactjs
material-ui
react-icons
2021-05-17 14:46:51
4个回答
我能够正确使用对齐position和topCSS属性。
<Box>
<Typography variant="h2">
Photography <FaCamera style={{position: 'relative', top: '8px'}} />
</Typography>
</Box>
您可以轻松地使用 Grid 来实现正确的对齐，而无需任何 CSS。
<Grid container alignItems="center" spacing={2}>
<Grid item>
<Typography variant="h2">
Photography
</Typography>
</Grid>
<Grid item>
<FaCamera />
</Grid>
</Grid>
只需fontSize="inherit"在您的内联图标上执行以下操作：<FaCamera fontSize="inherit" />
<Typography variant="h2">
Photography <FaCamera style={{verticalAlign:"middle"}}/>
</Typography>
您可以尝试内联样式“verticalAlign”，它对我有用。