我如何在反应中将图标与我的文本/段落一起居中？

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>