Html 如何将版权页脚定位到页脚的中心底部?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/34228591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position copyright footer into the center bottom of the footer?
提问by James Snowy
How can I position my copyright footer
into the center bottom of my footer without setting a padding? Is there any "correct" way of doing it?
如何footer
在不设置填充的情况下将我的版权置于页脚的中心底部?有什么“正确”的方法吗?
HTML
HTML
<footer class="footer">
<div class="footerContainer">
<p class="copyright">? GROUP TITLE 2015</p>
</div>
</footer>
CSS
CSS
footer.footer {
height: 300px;
width: 100%;
background-color: #333333;
}
p.copyright {
color: #fff;
line-height: 40px;
font-size: 0.7em;
}
Help, please.
请帮忙。
回答by Ian
Try this CSS:
试试这个 CSS:
<style>
footer {
position: relative;
height: 300px;
width: 100%;
background-color: #333333;
}
p.copyright {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 0.7em;
text-align: center;
bottom:0;
}
</style>
And adjust your HTML to:
并将您的 HTML 调整为:
<footer>
<p class="copyright">? GROUP TITLE 2015</p>
</footer>
And here's the fiddle.
这是小提琴。
回答by Baldráni
This should work.
这应该有效。
footer {
position: relative;
}
.copyright{
position: absolute;
bottom: 0;
}
回答by Barreto Freekhealer
do you realy need the footer and the footer container?
你真的需要页脚和页脚容器吗?
well doesnt matter, do you want it on the end of the page or allways in the bottom of the visible page?
没关系,你是希望它在页面的末尾还是一直在可见页面的底部?
for the end of the page:
对于页面的末尾:
CSS:
footer {
position: absolute;
bottom:0;
}
if you want it in the bottom of the screen (allways)
如果你想在屏幕底部(总是)
CSS:
footer {
position: fixed;
bottom:0;
}
you may learn a lot of these basics in www.w3schools.com(directed to the position property page).
您可以在www.w3schools.com(指向职位属性页面)中学到很多这些基础知识。
and abviously you have to close what you open..
显然你必须关闭你打开的东西..