html - 无法在 CSS 中将页脚居中-6ren

html - 无法在 CSS 中将页脚居中

转载作者：行者123 更新时间：2023-11-28 03:14:04

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

最佳答案

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

请注意，1280px 的宽度意味着文本将恰好位于 640px 的中心(1280px 的一半)，这很可能在您的视口(viewport)之外，宽度较小，这意味着它看起来好像您的文本不在中心。

要解决此问题，请改用基于百分比的 宽度，例如100% 以指示您的页脚应占据可用的全部宽度:

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