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>
I created a working example using Stackblitz . Could anyone please help?
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>
You can easily use a Grid to achieve the correct alignment without the need for any 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>
you can try inline style 'verticalAlign', it is works for me .
I ran into the same issue when importing icons from @mui/icons-material
.
Setting fontSize: 'inherit'
makes the icon the same size as the font. There was still a slight vertical alignment issue which I was able to resolve by using verticalAlign: 'text-top'
.
Code that worked for me was:
<Icon sx={{ fontSize: 'inherit', verticalAlign: 'text-top' }} />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.