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

Question

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

这是欲望渲染

{图标} 这是第一句话 这是第二句话

但是，我得到了这个 这是第二句话 {图标}这是句子句子

我的 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 类设为弹性框

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