我的网站上有一个页脚
。
我想让图标居中(垂直和水平),并且彩色区域为:
- 始终在屏幕底部
- 比图标高不了多少
代码:
#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; }
现在我的页脚位于底部,定义了像素完美的距离!
最佳答案
通过将 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>
关于html - Font Awesome 图标未正确定位在页脚中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38038419/