css - 页脚不响应中心命令

Question

我正在制作一个非常简单的网站，但我的页脚有问题:它没有居中。我已经完成了所有的 margin-left:auto;和正确的事情，问题仍然存在于 Chrome 和 Firefox 中。代码:

#footer {
  position: fixed;
  z-index:10;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  height:35px;
  bottom:0px;
  background-color:#363636;
  /* Style info that has nothing to do with the problem below this line */
  box-shadow: 1px -2px 6px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow:1px -2px 6px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:1px -2px 6px rgba(0, 0, 0, 0.5);  
  border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
}

已经尝试输入“display:inline-block;”。index.html 代码(当然它还在开发中，什么都没有):http://d.pr/btSa

提前致谢。

Answer 1

您的页脚未以边距居中的原因是 postion:fixed。删除它，它将服从你的 margin auto。

如果您需要修复，请将您的 css 更新为如下所示:

#footer {
  position: fixed;
  z-index:10;
  bottom:0;
  left:50%;
  margin-left: -500px;
  width: 1000px;
  height:35px;
  bottom:0px;
  background-color:#363636;
  /* Style info that has nothing to do with the problem below this line */
}

请注意添加 bottom:0;、left:50%; 并更新 margin 属性。