0

I am using react font awesome package and it is so annoying to see that some icons do not align vertically properly and tend to be lifted up higher than

enter image description here

As you can above, i scaled the react font awesome icon to 60px and it looks awful

here is how i use it within JSX

<p>Powered by <FaCcStripe size='60px' /></p>

How do i align it vertically to center with the other content or text? I mostly add the icons along with text and will like the icons to be vertically centered

uberrebu
  • 3,597
  • 9
  • 38
  • 73

1 Answers1

1

You can try this:

.container {
  display: flex;
  align-items: center;
}
<div className='container'>
  <p>Powered by</p>
  <FaCcStripe size='60px' />
</div>
Ajay poly
  • 73
  • 6
  • how do i align the div to the center of page? now it is far left. also how do i put spacing between the text and the icon? thanks! – uberrebu Aug 30 '22 at 06:00
  • parent div aligns content to center but did not respect the parent div. so will need to align center and also space between text and icon – uberrebu Aug 30 '22 at 06:11
  • Try this : .container { display: flex; align-items: center; justify-content: center; width: 100%; column-gap: 10px; } – Ajay poly Aug 30 '22 at 06:43
  • 1
    perfect, mind updating the answer with that? will accept..thanks a lot – uberrebu Aug 30 '22 at 06:55