React 图标与文本不对齐

Question

I have a very simple question, I have react icon and text in front of it. The text is not aligned with the React Icon. How can I align it with text? Check the screenshot. My code is:

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

screenshot

Answer 1

Try to wrap icon component and your span label with outer div block. Then apply some class to the div where child elements aligned by flexbox.

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

Answer 2

Andriis answer of wrapping it in a flex box combined with the answer from this github issue thread worked for me.

vertical-align: bottom; style on the icon.

Answer 3

As suggested by Andrii, wrap your Icon component & span label in a parent div style the div as below:

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

Worked for me perfectly!