页脚不响应中心命令

发布于 2025-01-07 07:38:02 字数 889 浏览 0 评论 0原文

我正在制作一个非常简单的网站，但我的页脚有一个问题：它没有居中。我已经完成了所有的 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 代码（ofc 仍在开发中，什么也没有）： http://d.pr/btSa

提前致谢。

原文

I'm making a very simple website and I've got a problem with my footer: it's not centering. I've done all the margin-left:auto; and right things, and the problem persists in Chrome and Firefox. The code:

#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;
}

Already tried typing in "display:inline-block;".
The index.html code (ofc it's still in-dev, has nothing): http://d.pr/btSa

Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不弃不离 2025-01-14 07:38:02

页脚未以边距居中的原因是由于 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 属性。

The reason your footer is not centering with margin is because of the postion:fixed. Remove that and it will obey your margin auto's.

If you need it to be fixed, update your css to look like this:

#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 */
}

note adding the bottom:0;, left:50%; and updating the margin properties.

回复收藏 0 原文