时间戳

首页 > 解决方案 > 为什么我的页脚没有居中？(HTML & CSS)

html - 为什么我的页脚没有居中？(HTML & CSS)

问题描述

html,
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  font-family: 'Century Gothic', sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
}

.wrapper {
  overflow-x: hidden;
}

#main-header {
  background-color: transparent;
  text-align: center;
  color: darkslategray;
  font-family: 'Century Gothic', sans-serif;
  font-size: 20px;
  letter-spacing: 4px;
  line-height: 50px;
}

#main-header a {
  color: darkslategray;
  text-decoration: none;
  transition: all ease-in-out 250ms;
}

#main-header a:hover {
  color: #5e3232;
}

#menu {
  background-color: transparent;
}

#menu ul {
  background-color: transparent;
  text-align: center;
  padding: 0;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  font-size: 18px;
  padding-left: 10px;
  padding-right: 10px;
  color: darkslategray;
  text-decoration: none;
  transition: all ease-in-out 250ms;
}

#menu a:hover {
  color: rgb(136, 94, 38);
}

body {
  background-color: /*linear-gradient(60deg, #CCFFFF, #FFCCCC);*/
  thistle;
  background-repeat: none;
  line-height: 24px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  color: #555;
  font-weight: normal;
}

main {
  margin: 0 auto;
  padding: 30px 20px;
  width: 90vw;
}

section {
  margin: auto;
}

article {
  padding: 20px;
  margin-bottom: 20px;
}

footer {
  text-align: center;
  font-size: 15px;
  font-family: 'Century Gothic', sans-serif;
  padding: 20px;
  background-color: thistle;
  bottom: 0;
  margin: 0;
  width: 100%;
  position: absolute;
}

#item a {
  font-size: 18px;
  color: darkslategray;
  text-decoration: none;
  transition: all ease-in-out 250ms;
}

#item a:hover {
  color: rgba(104, 161, 28, 0.911);
}

@media (max-width: 768px) {
  #main-header {
    float: none;
    text-align: center;
    padding-top: 15px;
  }
  #main-header h1 {
    font-size: 24px;
    line-height: 25px;
  }
  .logos {
    padding-top: 5px;
  }
  #menu {
    margin-top: -10px;
  }
  #menu a {
    font-size: 17px;
  }
  body {
    position: relative;
  }
  body::after {
    content: "";
    display: block;
    height: 50px;
  }
  body h2 {
    font-size: 20px;
    margin-top: -25px;
  }
  body p {
    font-size: 16px;
  }
}
<div class="wrapper">
  <header id="main-header" class="alt">

    <div class="logos">
      <a href="http://www.linkedin.com" i class="fa fa-linkedin-square" style="font-size:36px"></a>
      </i>
      <a href="https://www.github.com" i class="fa fa-github-square" style="font-size:36px"></a>
      </i>
      <a href="http://www.gmail.com" i class="fa fa-envelope-square" style="font-size:36px"></a>
      </i>
    </div>
  </header>
  <nav id="menu">
    <!--<div class="container">-->
    <ul class="links">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Me</a></li>
      <li class="current"><a href="projects.html">Projects</a></li>
    </ul>
    <!--</div>-->
  </nav>
  <main>
    <section>
      <article id="item">
        <h2>Projects</h2>
        <h4><a href="aod.html">Request</a></h4>
        <small>January to April 2020</small>
        <h4><a href="pillbuzz.html">Reverse</a></h4>
        <small>September to December 2018</small>
      </article>
    </section>
  </main>

  <footer>
    <p>&copy; 2020</p>
  </footer>
</div>

我不确定为什么我的页脚没有居中。主标题、菜单和社交媒体链接都居中，但只有页脚不是。我已经尝试从头开始重做代码，但我不确定我是否遗漏了什么。我是编码新手，所以任何帮助将不胜感激。

标签： htmlcss

解决方案

问题出在您的页脚 css 声明中。您将填充设置为 20 像素，宽度设置为 100%，这会在页脚左侧添加一些空间并偏移它，但由于宽度为 100%，因此它跨越了页面宽度。

只需将填充更改为仅适用于顶部和底部

footer {
  text-align: center;
  font-size: 15px;
  font-family: 'Century Gothic', sans-serif;
  padding: 20px 0;
  background-color: thistle;
  bottom: 0;
  margin: 0;
  width: 100%;
  position: absolute;
}

推荐阅读