如何在页脚内居中放置社交媒体图标？

Question

我试图将社交媒体图标放在页脚中，但是由于某些原因，当我编辑代码时，仍然没有任何变化。有人可以帮忙吗？

footer {
  background-color: #FFF;
  color: white;
  padding: 15px;
}

.fa{
    color: black;
    font-size: 50px;

}

<div class="container">
  <footer>
    <div class="footer-social-icons">
        <a href="#" class="fa fa-facebook"></a>
        <a href="#" class="fa fa-instagram"></a>
    </div>
  </footer>
 </div>
</div>

Answer 1

您是否尝试过将"include": [ "**/*.ts", "./node_modules/my-package" ] 添加到text-align: center？

jsFiddle

Answer 2

对此您有三个选择：

• 如果您使用的是Bootstrap，则可以在playplay中简单地添加文本中心。
• 您可以在页脚样式中添加text-align：center。
• 您可以定义div的宽度，然后按照以下代码自动设置该div的边距

7

.social{
display: block;
width: 20%;
margin: auto;
}

Answer 3

只需将footer中的文本对齐到text-align: center;的中心即可。

footer {
  ...
  text-align: center;
}

footer {
  background-color: #FFF;
  color: white;
  padding: 15px;
  text-align: center;
}

.fa{
    color: black;
    font-size: 50px;

}

<div class="container">
  <footer>
    <div class="footer-social-icons">
        <a href="#" class="fa fa-facebook">F</a>
        <a href="#" class="fa fa-instagram">I</a>
    </div>
  </footer>
 </div>
</div>

Answer 4

您也可以借助display：flex属性来实现此目的。

.footer-social-icons{
 display:flex;
 justify-content:center;
 width:100%;
 }