无法在 CSS 中将页脚居中答案

【问题标题】：Unable to center footer in CSS无法在 CSS 中将页脚居中
【发布时间】：2018-01-15 09:05:48
【问题描述】：

我无法使页脚在页面上居中。所有内容都以页面为中心并设置为 1280px，因此不会占用页面的整个宽度。问题是页面上的所有内容都居中，除了页脚。这是正确的宽度，但页脚向左推。有什么我想念的想法吗？

这是页脚当前的样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="../Css/Style.css">
    <link rel="icon" type="png" href="../Pictures/Icon.png">
    <meta charset="utf-8"/>
    <meta name="description" content="xxx">
    <meta name="keywords" content="xxx">
    <meta name="author" content="xxx">
    <title>xxx</title>
</head>
<body>
  <div id="container">
    <div id="header">
      <h1>xxx</h1>
      <h2>xxx</h2>
    </div>
    <div>
      <hr/>
    </div>
    <div id="menu">
      <ul>
        <li class="menuitem"><a href="xxx.html">Home</a></li>
        <li class="menuitem"><a href="xxx.html">Manage Income</a></li>
        <li class="menuitem"><a href="xxx.html">Manage Bills</a></li>
        <li class="menuitem"><a href="xxx.html">View Calendar</a></li>
      </ul>
      <a id="signout" href="SignOut.html">Signout</a>
    </div>
    <div class="pie"></div>
  </div>
</body>
<footer>
  <a id="contact" href="xxx.html">Contact Us</a>
</footer>
</html>


footer{
  display: block;
  width: 1280px;
  height: 35px;
  text-align: center;
  bottom: 0px;
  position: fixed;
  float: none;
  margin: auto;
  background-color: #B6B6B4;
}

【问题讨论】：

感谢您提供您的 CSS，但您能否也提供相关的 HTML？没有它，几乎不可能回答这个问题。如果您可以更新您的问题以在minimal, complete, and verifiable example 中列出所有相关代码，这将有所帮助。如果您的 HTML 是在服务器端生成的，请发布输出。有关更多信息，请参阅有关how to ask good questions 的帮助文章:)
如果有任何东西覆盖了您的 css，请查看调试器

标签： html css alignment footer

【解决方案1】：

您的示例代码对我来说似乎正确对齐。

请注意，1280px 的宽度意味着文本将准确地以 640px 为中心（1280px 的一半），这可能在较小的宽度下在您的视口之外，这意味着它会看起来好像您的文本不是中心的。

要解决此问题，请改用基于百分比的宽度，例如 100% 来指示您的页脚应占据可用的整个宽度：

footer {
  display: block;
  width: 100%;
  height: 35px;
  text-align: center;
  bottom: 0px;
  position: fixed;
  float: none;
  margin: auto;
  background-color: #B6B6B4;
}

<footer>
  Test
</footer>

正如您在上面的示例中看到的，即使视口很窄，文本也是可见的。

请注意，您的页脚 CSS 也可能被带有 higher specificity 的选择器覆盖。您可以使用F12 Debugger 来确保您的规则得到正确应用。

希望这会有所帮助！ :)

【讨论】：

谢谢！我将尝试调试器。我想也许以前的东西可能会覆盖选择器，但我还不能确定它。我很感激答案！我添加了它的图像。也许您可以看一下，看看您是否认为这是正在发生的事情？不管怎样，谢谢！
查看您的新代码，我仍然无法重现您的问题。我仍然认为问题与你的宽度有关。尝试使用width 的100%，或者如果这不起作用，则使用100vw 的宽度。您的文本也可能需要 margin: 0 auto 应用于它（用于对齐 block 而不是内联内容）。除此之外，从我的工作示例开始，然后将您的代码添加到其中，分而治之以识别问题。如果您仍有问题，这将帮助您提供minimal, complete, and verifiable example :)