Question

我一直在尝试将这些字体真棒图标放在页面中心，但似乎没有任何效果。这是我的代码

.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>

Answer 1

只需添加中心标签

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

如果出现任何问题，请告诉我

https://codepen.io/gvsakhil/pen/ZMoVXY我已经添加了Codepen，如果需要的话请签出

Answer 2

->只需添加边距：0自动；在.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>

如何将超棒字体图标对准中心？

2 个答案: