将社交媒体图标定位在页脚 div 的中间答案

【问题标题】：Positioning social media icons in middle of footer div将社交媒体图标定位在页脚 div 的中间
【发布时间】：2017-12-30 19:25:30
【问题描述】：

我不知道如何将社交媒体图标放置在“联系我”按钮下方的页脚中间，并使整个页脚在没有 lorem ipsum 文本的情况下粘在底部。请帮忙

https://codepen.io/Sankyeat/pen/VybeLY

以下是页脚代码：

<div class="container">
          <footer class="bg-dark">
            <div class="row">
              <a href="#" class="btn btn-info mx-auto">Contact Me</a>
            </div>
            <div class="row mt-3 social">
              <i class="fa fa-twitter" aria-hidden="true"></i>
              <i class="fa fa-facebook" aria-hidden="true"></i>
              <i class="fa fa-linkedin" aria-hidden="true"></i>
              <i class="fa fa-instagram" aria-hidden="true"></i>
              <i class="fa fa-pinterest-p" aria-hidden="true"></i>
            </div>
          </footer>
        </div>

.footer {
  height: 100px;
}

.social {

  width: 50%;
  display: inline-block;

}

【问题讨论】：

codepen 不显示社交媒体图标，但在开发过程中会出现在浏览器上

标签： twitter-bootstrap positioning

【解决方案1】：

使用text-center 类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <footer class="bg-dark">
    <div class="row">
      <div class='col-md-4 text-center'>
      <a href="#" class="btn btn-info mx-auto">Contact Me</a>
      </div>
    </div>
    <div class="row col-md-4 text-center">
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <i class="fa fa-facebook" aria-hidden="true"></i>
      <i class="fa fa-linkedin" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <i class="fa fa-pinterest-p" aria-hidden="true"></i>
    </div>
  </footer>
</div>

【讨论】：