React图标与文本不对齐

Question

我有一个非常简单的问题，我已经在它前面反应了图标和文字。文本未与React图标对齐。如何将其与文本对齐？检查屏幕截图。我的代码是：

<MdPerson size={20}/><span> Profile</span>

screenshot

Answer 1

Andriis 将其包装在 flex box 中的回答结合 this github issue thread 的回答对我有用。

vertical-align: bottom; 图标样式。

Answer 2

尝试使用外部span块包装图标组件和div标签。然后将一些类应用于div，其中子元素由flexbox对齐。

.centered-label {
  display: flex;
  align-items: center;
}

Answer 3

按照 Andrii 的建议，将您的 Icon 组件和 span 标签包装在父 div 样式的 div 中，如下所示：

<div style={{display: "flex", justifyContent: "center"}}>
<MdPerson size={20}/><span> Profile</span>
</div>

非常适合我！