![](/img/trans.png)
[英]How can I center my icons in the middle of the page and place the text under the icons?
[英]How can i center icons along with my text/paragraph in react?
我怎样才能让我的图标像<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;
}
display:flex
在容器上对齐子元素(icon & p)注意:将
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.