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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 18:38:16  来源:igfitidea点击:

How to position copyright footer into the center bottom of the footer?

htmlcss

提问by James Snowy

How can I position my copyright footerinto 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..

显然你必须关闭你打开的东西..