Question

我无法将页脚居中放在页面上。所有内容都以页面为中心并设置为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;
}

Answer 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确保正确应用规则。

希望这有帮助！：）

无法在CSS

1 个答案: