在页脚

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

  

使用此代码看起来如何：

我已将padding值中的margin，height和px更改了几次，但无法达到预期效果。

编辑：Dippas的代码有效，但我不得不修改一些现有的CSS代码 - 它出现了：

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

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

Answer 1

使用flexbox将display:flex和justify-content: center应用于ul即可实现您的目标。

OP评论

  啊，这是一个很好的功能。我喜欢1.2em的外观;但是，我   仍然留下了页脚太高的问题。我想要它   大约是图标的两倍，它们位于中心。

因此，使用align-items:center中的flexbox来垂直对齐，加上一些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>

Answer 2

绝对容器并将其转换到位

使用类.social-icons处理ul元素：

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;