html - HTM/CSS - 粘性页脚未居中

Question

我试图将粘性页脚居中但无济于事。这是我尝试过的:

HTML:

    <div class="footer-be">
        <div class="footer-be-middle">
            <eGov:EgovReusableContentControl runat="server" id="menuContent" ReusableContentListItemTitle="MasterPage_FooterMenus"/>
        </div>                              
    </div>

CSS:

    .footer-be {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 9999;
        background-color: white !important;
        font-family: "Calibri";
    }

    .footer-be-middle
    {   
        text-align: center;
        height: 100%;
        overflow: hidden;
        width: 60%;
        margin: 0 auto;


    }

我正在使用具有自定义(内部)主题的 SharePoint 2013。我必须修改页 footer 分(将其删除)，因为我需要在用户滚动时将页脚粘在底部。

我做错了什么？

Answer 1

首先，如果页脚有 100% 宽度，为什么它还有边距？
所以我去掉了边距，所以现在页面底部有一个 100% 宽的元素。
其次，您需要为居中的 div 设置一个自动水平边距。HTML:

 <div class="footer-be">
   <div class="footer-be-middle">
     <eGov:EgovReusableContentControl runat="server" id="menuContent" ReusableContentListItemTitle="MasterPage_FooterMenus"/>
   </div>                              
</div>

CSS:

.footer-be {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    height: 80px;
    background-color: red !important;
    font-family: "Calibri";
}

.footer-be-middle
{   
  width: 50%;
  margin: 0 auto;

  text-align: center;
  height: 100%;
  overflow: hidden;
  background-color: green;
}

fiddle : https://jsfiddle.net/2zr7gr7z/