我的网站上有一个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>

  

这段代码是什么样子的:
html -  Font Awesome 图标未正确放置在页脚中-LMLPHP
我改变了padding中的marginheightpx值几次,都没有达到预期的效果。
编辑:DIPPAS的代码工作,但我必须修改一些现有的CSS代码-它是:
#footer .container .row > div {
margin-bottom: 10px;
margin-top: -23px; }

现在我的页脚在底部,像素完美距离定义!

最佳答案

使用flexboxdisplay:flexjustify-content: center应用到ul可以实现您想要的。
操作注释
啊,这是一个很好的特点。我喜欢下午1点2分的样子;。但是,我
仍然留下了页脚太高的问题。我想要它
大约是图标的两倍高,中间有图标。
因此,使用align-items:centerfromflexbox垂直对齐,再加上一些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>

08-05 02:16
查看更多