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

Question

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

这里是愿望渲染图

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

但是，我得到了这个这是第二句 {icon} 这是句子sentence

我的 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

非常感谢任何帮助。谢谢

Answer 1

尝试将 iconButton class 设为弹性框

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

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

css fontawesome icon align with two text line inside a button ReactJS

css

font-awesome

reactjs