字体真棒图标没有正确定位在页脚

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，你可以达到你想要的东西。

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类变换到位

Chaning UI元素：

• positiom:absolute;所以我们可以定位它页脚#footer内。
• top:50%;left:50%;所以它在中间水平和垂直
• transform: translate(-50%, -50%);因为职位是从左上角计算。通过应用display:flex和justify-content: center到ul

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