css - React 图标与文本不对齐

Question

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

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

screenshot

Answer 1

尝试用外部 div block 包裹图标组件和您的 span 标签。然后将一些类应用于子元素由 flexbox 对齐的 div。

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