Menu
I am a newbie in MUI, now my icon and text are not aligned:
My desired results:
My code is:
<div style={{ display: 'inline-flex', VerticalAlign: 'text-bottom', BoxSizing: 'inherit', textAlign: 'center', AlignItems: 'center' }}> <LinkIcon className={classes.linkIcon} /> revolve </div> I tried grid and row, but not work. Can anyone help me?
678
To align horizontal icon and text in React Material UI, we can add flexbox styles with makeStyles . to call makeStyles with a function that returns the styles for the wrapIcon class to return the useStyle hook.
Use line-height for vertical centering with a fixed height To vertically center a single line of text or an icon within its container, we can use the line-height property. This property controls the height of a line in a run of text and adds an equal amount of space above and below the line-box of inline elements.
This works perfectly!
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', }}> <LinkIcon /> <span>revolve</span> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With