How can i center icons along with my text/paragraph in react?

Question

How can i center my icons like <GrTools size="30px"/> along with my text? I am kind of having issues with some of my styled centering components.

my js:

<div id = 'paragraph' className="container" >
          <h1 className='text-center' > Title <b>  </b>  </h1>    
          <p id='content' className='lead mb-4'> paragraph</p>
          <hr className='col-xs-12 '/>
          <p id='content' className='lead mb-4'> paragraph</p>
            <GrTechnology className = 'responsive-image' size='30px'/>
          <p id='content' className='lead mb-4'> Paragraph</p>
            <GrTools size="30px"/>
          <p id='content' className='lead mb-4'> Paragraph</p>
</div>

my css file:

div#paragraph{

  width: 100%;
  margin: 0px auto;
}
p#content{
  text-align: center;
  width: 100%;
  margin: 50px auto;
}

Try using flex box to center the items in the parent div. That combined with text-align: center should get you your desired result. The styles you'll need to add: { display: 'flex', justifyContent: 'center', alignItems: 'center' }. Additional information on how to use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. — man517, Oct 10 '22 at 17:52

score 0 · Answer 1 · answered Oct 10 '22 at 22:08

Wrap the paragraph and icon in a div(container) and use flex-box display:flex on the container to align the children(icon & p)
as @man517 suggested this guide more then enough css-tricks.com/snippets/css/a-guide-to-flexbox

note: change the class to className

.container{
  display: flex;
}

<div id='paragraph' >
  <h1 className='text-center'> Title <b> </b> </h1>
  <p id='content' className='lead mb-4'> paragraph</p>
  <hr className='col-xs-12 ' />
  <div class="container">
     <p id='content' className='lead mb-4'> paragraph</p>
     <img src="https://img.icons8.com/ios-glyphs/30/000000/cat--v1.png" width='30px' />
  </div>
 
  
  <div class="container">
     <img src="https://img.icons8.com/ios-glyphs/30/000000/cat--v1.png" width='30px' />
     <p id='content' className='lead mb-4'> paragraph</p>
  </div>
 
  <p id='content' className='lead mb-4'> Paragraph</p>
</div>

How can i center icons along with my text/paragraph in react?

1 Answers1