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>
Asked
Active
Viewed 2.0k times
10
shyammakwana.me
- 5,562
- 2
- 29
- 50
Kahn
- 429
- 3
- 6
- 19
-
Possible duplicate of [Vertically align text next to an image?](https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) – bennygenel Sep 17 '17 at 10:03
-
I have tried that and its not working :( – Kahn Sep 17 '17 at 10:25
-
Apply line height and height to profile span which is equal to image height and then apply vertical align – shyammakwana.me Sep 17 '17 at 10:43
3 Answers
15
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;
}
Andrii Skrebets
- 234
- 1
- 7
4
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.
Michael Mudge
- 369
- 1
- 5
- 10
2
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!
Alex Mo
- 131
- 1
- 2
- 11