CSS:固定到底部并居中

2023-12-06

我需要将页脚固定在页面底部并将其居中。页脚的内容可能随时变化,所以我不能仅仅通过 margin-left: xxpx; 将其居中。右边距:xxpx;

问题是由于某种原因这不起作用:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

我爬遍了网络,却一无所获。我尝试制作一个容器 div 和 nada。我尝试了其他组合和gurnisht。我怎样才能做到这一点?

Thanks


您应该使用粘性页脚解决方案,如下所示:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

还有其他类似的;

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

与html:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS:固定到底部并居中 的相关文章