字体真棒图标未正确定位在页脚中

Question

我的网站上有一个 footer。

我想让图标居中（垂直和水平），彩色区域为：

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

代码：

#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://whosebug.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

绝对容器，就地改造

改变 ul 元素 class .social-icons:

positiom:absolute; 所以我们可以把它放在页脚里面 #footer.
top:50%; left:50%; 所以它在水平和垂直的中间
transform: translate(-50%, -50%);因为位置是从左上角开始计算的。

#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: 120px; /*Display property can be changed*/
}
#footer .social-icons {
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#footer li {
  margin: 0;
  display: inline-block;
  /*For display only*/
  width: 10px;
  height: 10px;
  background-color: firebrick;
}

<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://whosebug.com" target="_blank" title="Linkedin"><i class="fa fa-stack-overflow"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Answer 2

通过将 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://whosebug.com" target="_blank" title="Linkedin"><i class="fa fa-stack-overflow"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

字体真棒图标未正确定位在页脚中

Font-awesome icons not correctly positioned in the footer

html

css

footer

font-awesome

绝对容器，就地改造