html - Font Awesome 图标未正确定位在页脚中

Question

我的网站上有一个页脚。

我想让图标居中(垂直和水平)，并且彩色区域为:

• 始终在屏幕底部
• 比图标高不了多少

代码:

#footer {
  background: #0e0e0e;
  border-top: 0px solid #0e0e0e;
  font-size: 0.9em;
  margin-top: 0px;
  padding: 0px;
  clear: both;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0px;
}

<footer id="footer" class="color color-secondary short">
  <div class="container">
    <div class="row">
      <div class="col-md-12 center">
        <ul class="social-icons mb-md">
          <li class="social-icons-fa-github"><a href="https://github.com" target="_blank" title="GitHub"><i class="fa fa-github"></i></a>
          </li>
          <li class="social-icons-linkedin"><a href="www.linkedin.com" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a>
          </li>
          <li class="social-icons-stack-overflow"><a href="http://stackoverflow.com" target="_blank" title="Linkedin"><i class="fa fa-stack-overflow"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

  

这段代码看起来像什么:

我已经多次更改 px 中的 padding、margin 和 height 值，但无法'达到预期的效果。

编辑:Dippas 的代码有效，但我不得不修改一些现有的 CSS 代码 - 结果如下:

#footer .container .row > div {
margin-bottom: 10px;
margin-top: -23px; }

现在我的页脚位于底部，定义了像素完美的距离!

Answer 1

通过将 display:flex 和 justify-content: center 应用于 ul 使用 flexbox 你可以实现什么你想要的。

OP 评论

Ah, that's a neat feature. I like the look of 1.2em;. However, I'm still left with the issue of the footer being too tall. I'd like it to be about twice as tall as the icons, with them in the centre.

所以，使用 flexbox 中的 align-items:center 垂直对齐，加上一些 height，我选择了 2em，随意选择你最喜欢的。

#footer {
  background: #0e0e0e;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 1.2em;
}
#footer ul {
  display: flex;
  justify-content: center;
  align-items:center;
  height:2em;
  margin: 0;
  padding: 0
}
#footer li {
  list-style: none;
  display: inline-block;
  margin: 0 5px
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<footer id="footer" class="color color-secondary short">
  <div class="container">
    <div class="row">
      <div class="col-md-12 center">
        <ul class="social-icons mb-md">
          <li class="social-icons-fa-github"><a href="https://github.com" target="_blank" title="GitHub"><i class="fa fa-github"></i></a>
          </li>
          <li class="social-icons-linkedin"><a href="www.linkedin.com" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a>
          </li>
          <li class="social-icons-stack-overflow"><a href="http://stackoverflow.com" target="_blank" title="Linkedin"><i class="fa fa-stack-overflow"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>