[英]How to align font-awesome icons to the center?
I've been trying these font-awesome icons to the center of the page but nothing seems to be working. 我一直在尝试将这些字体真棒图标放在页面中心,但似乎没有任何效果。 Here is my code
这是我的代码
.center { text-align:center; width:50%; } .icon: { width: 200px; height: 200px; } #icons { display: inline-block; text-align: center; color: black; padding-right: 50px; width: 100px; height: 100px; }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <div class="center"> <!-- Facebook --> <a href="https://www.facebook.com/faizan.khan.7146" class="icons-lg fb-ic" target="_blank"><i id="icons" class="fa fa-facebook" style="font-size: 65px;"></i></a> <!-- Twitter --> <a href="https://twitter.com/faizan_khan698" class="icons-lg tw-ic" target="_blank"><i id="icons" class="fa fa-twitter" style="font-size: 65px;"></i></a> <!--Github--> <a href="https://github.com/fkhan698" class="icons-sm git-ic" target="_blank"><i id="icons" class="fa fa-github" style="font-size: 65px;"> </i></a> <!--Reddit--> <a href="https://www.reddit.com/user/pakiman698/" class="icons-sm reddit-ic" target="_blank"><i id="icons" class="fa fa-reddit" style="font-size: 65px;"></i></a> </div>
Just add center tag 只需添加中心标签
<center>
<a href="" class="icons-lg fb-ic" target="_blank"><i id="icons" class="fa fa-facebook" style="font-size: 65px;"> </i></a>
<!-- Twitter -->
<a href="" class="icons-lg tw-ic" target="_blank"><i id="icons" class="fa fa-twitter" style="font-size: 65px;"></i></a>
<!--Github-->
<a href="" class="icons-sm git-ic" target="_blank"><i id="icons" class="fa fa-github" style="font-size: 65px;"> </i></a>
<!--Reddit-->
<a href="" class="icons-sm reddit-ic" target="_blank"><i id="icons" class="fa fa-reddit" style="font-size: 65px;"></i></a>
<br>
</center>
If anything goes wrong let me know 如果有任何问题请通知我
https://codepen.io/gvsakhil/pen/ZMoVXY I have added codepen, if needed checkit out https://codepen.io/gvsakhil/pen/ZMoVXY我已经添加了Codepen,如果需要的话请签出
-> Just add margin: 0 auto; ->只需添加保证金:0自动; in .center class.
在.center类中。
.center { text-align:center; width:50%; margin: 0 auto; } .icon: { width: 200px; height: 200px; } #icons { display: inline-block; text-align: center; color: black; padding-right: 50px; width: 100px; height: 100px; }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> <div class="center"> <!-- Facebook --> <a href="https://www.facebook.com/faizan.khan.7146" class="icons-lg fb-ic" target="_blank"><i id="icons" class="fa fa-facebook" style="font-size: 65px;"></i></a> <!-- Twitter --> <a href="https://twitter.com/faizan_khan698" class="icons-lg tw-ic" target="_blank"><i id="icons" class="fa fa-twitter" style="font-size: 65px;"></i></a> <!--Github--> <a href="https://github.com/fkhan698" class="icons-sm git-ic" target="_blank"><i id="icons" class="fa fa-github" style="font-size: 65px;"> </i></a> <!--Reddit--> <a href="https://www.reddit.com/user/pakiman698/" class="icons-sm reddit-ic" target="_blank"><i id="icons" class="fa fa-reddit" style="font-size: 65px;"></i></a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.