如何在Material-UI中对齐水平图标和文本 [英] How to align horizontal icon and text in Material-UI

问题描述

我是Material-ui的新手，现在我的图标和文本未对齐：

我想要的结果：

我的代码是：

 < ; div style = {{
 display：'inline-flex'，
 VerticalAlign：'text-bottom'，
 BoxSizing：'inherit'，
 textAlign：'center'， 
 AlignItems：'center'
}}> 
< LinkIcon className = {classes.linkIcon} /> 
旋转
< / div> 
  

我尝试了网格和行，但没有用。有人可以帮我吗？

解决方案

这很好！

 < div style = {{
 display：'flex'，
 alignItems：'center'
}}> 
< LinkIcon /> 
< p< / p> 
< / div> 
  

I am a newbie in material-ui, 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?

解决方案

This works perfectly!

<div style={{
    display: 'flex',
    alignItems: 'center'
}}>
    <LinkIcon />
    <p>revolve</p>
</div>  

这篇关于如何在Material-UI中对齐水平图标和文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！