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

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;
}

Answer 1

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>