如何在页脚中居中社交媒体图标？答案

【问题标题】：How do I center social media icons within the footer?如何在页脚中居中社交媒体图标？
【发布时间】：2019-02-26 16:27:15
【问题描述】：

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

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>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您是否尝试将text-align: center 添加到footer？

jsFiddle

【讨论】：

@Angel 很高兴听到。如果您能将我的答案标记为已选答案，我将不胜感激。

【解决方案2】：

你有三个选择：

如果您使用的是 Bootstrap，您可以简单地将 text-center 添加到您的页脚类中。
您可以将 text-align: center 添加到您的页脚样式中。
你可以定义一个div的宽度，然后给这个div设置margin auto，如下代码

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<div class="social">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
</div>      
</body>
</html>

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

您也可以借助 display: flex 属性来实现这一点。

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

【讨论】：