我如何在反應中將圖標與我的文本/段落一起居中？

Question

我怎樣才能讓我的圖標像<GrTools size="30px"/>和我的文字一樣居中？ 我的一些樣式居中組件有點問題。

我的 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>

我的 css 文件：

div#paragraph{

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

Answer 1

• 將段落和圖標包裝在一個 div(容器) 中，並使用 flex-box display:flex在容器上對齊子元素(icon & p)
• 正如@man517 所建議的那樣，本指南就足夠了css-tricks.com/snippets/css/a-guide-to-flexbox

注意：將class更改為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>