css - css fontawesome 图标与按钮 ReactJS 内的两个文本行对齐

Question

我正在尝试将 fontawesome 图标与两行对齐，其中图标与第一句位于同一行。

这是欲望渲染

{icon} 这是第一句 这是第二句

但是，我明白了这是第二句 {icon} 这是句子句子

我的 JSX 代码

<Button className{myStyle.iconButton}>
  <i className="fa fa-user"/>
  <p className={myStyle.iconText}>
    {"This is the first sentence"}<br/>
    {"This is the second sentence"}
  </p>
</Button>

.CSS

.iconButton
  text-align: left

.iconText
  display: inline-block

任何帮助是极大的赞赏。谢谢

标签： cssreactjsfont-awesome

Answer 1

尝试使 iconButton 类成为弹性框

.iconButton{
display: flex;
align-items: baseline;
}