我的网站上有一个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; }
现在我的页脚在底部,像素完美距离定义!
最佳答案
使用flexbox
将display:flex
和justify-content: center
应用到ul
可以实现您想要的。
操作注释
啊,这是一个很好的特点。我喜欢下午1点2分的样子;。但是,我
仍然留下了页脚太高的问题。我想要它
大约是图标的两倍高,中间有图标。
因此,使用align-items:center
fromflexbox
垂直对齐,再加上一些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>