Question

我想将页脚对齐页面的底部中心，但下面的代码不起作用。你能告诉我应该做些什么改变吗？

<style type="text/css">  
  #footer {  
   bottom : 2;  
   height : 40px;  
   margin-top : 40px;  
   text-align: center;  
   vertical-align: middle;  

  }  
</style>  
<div id="footer">Terms and Conditions </div>

Answer 1

尝试此代码：

  <style type="text/css">  
  #footer {  
   bottom : 2; 
   padding-bottom: 0; 
   height : 40px;  
   margin-top : 40px; 
   margin: auto;
   width: 50%;
   text-align: center;  
  }  
</style>  
<div id="footer">Terms and Conditions </div>

您可以根据自己的意愿更改宽度

Answer 2

要将您需要的大部分内容定义为宽度，然后让自动边距接管其余部分。

<style type="text/css">  
  #footer {  
   bottom : 2;  
   height : 40px;   
   text-align: center;  
   vertical-align: middle;


   width:950px;
   margin:40px auto 0;  

  }  
</style>

Answer 3

试试这个

#footer {  
     height: 100px;
     margin-top: -50px;
     position: fixed;
     bottom:0;
     width: 100%;
     z-index: 1;
     text-align:center;
  }

DEMO

Answer 4

首先， bottom值应位于px或% 。选中此CSS : BOTTOM，仅当您将其与任何position属性相结合时才会有效，请检查此CSS:POSITION

如果您希望页脚始终位于页面底部，则可以使用position:fixed和bottom:<value>的组合。

最后设置div width:100%以使其占据浏览器窗口的整个宽度 像这样，

 #footer {  
   bottom : 2px;  
   height : 40px;  
   margin-top : 40px;  
   text-align: center;  
   vertical-align: middle; 
   position:fixed;
   width:100%;
}

如何在HTML的底部中心对齐页脚

4 个答案: