HTML / CSS - 底部居中页脚

Question

我正在尝试将页脚放在我页面的 底部中心 但是没有任何效果，我不知道它是否是一个代码阻止它下降，但我确定它是！

我是 HTML 和 CSS 的新手！请指教！

下面是我的完整HTML和CSS代码！

非常感谢您的帮助！

PS：我不想更改我当前的代码，因为它正在运行非常好, 我只想将页脚放在我页面的底部中心！

(与导航栏完全一样)

请在您的编辑器上尝试以便更好地理解！

body {
  background-image: url(../images/body_bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.topnav {
  background-color: rgb(54, 54, 54);
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top: 3px solid rgb(250, 186, 113);
  border-bottom: 3px solid rgb(250, 186, 113);
  filter: saturate(2);
}

.topnav a {
  float: left;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: rgb(250, 186, 113);
  text-align: center;
  padding: 11px 15px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

.topnav a:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: rgb(0, 0, 0);
}

.topnav a.active {
  background-color: rgb(250, 186, 113);
  color: white;
}

.social {
  float: right;
}

#logo {
  position: absolute;
  left: 445px;
  top: -11px;
  text-align: center;
  background-color: transparent;
  color: rgb(250, 186, 113);
}

img {
  top: 7px;
  width: 30px;
  height: 30px;
  position: relative;
  left: 181px;
  text-align: center;
}

.footer {
  display: block;
  overflow: hidden;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: rgb(250, 186, 113);
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  background-color: rgb(54, 54, 54);
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top: 3px solid rgb(250, 186, 113);
  border-bottom: 3px solid rgb(250, 186, 113);
  filter: saturate(2);
}

<div class="topnav">
  <a class="active" href="#home"><i class="fa-solid fa-house"></i> Home</a>
  <a href="portfolio.html"><i class="fa-solid fa-wallet"></i> Portfolio</a>
  <a href="contact.html"><i class="fa-regular fa-circle-user"></i> Contact</a>
  <a href="about.html"><i class="fa-regular fa-comment"></i> About</a>
  <a href="index.html" id="logo"><img src="images/logo2.png" alt="logo"></a>
  <div class="social">
    <a class="facebook" href="https://facebook.com" target="_blank" title="Facebook"><i class="fa-brands fa-facebook"></i>&nbsp Facebook</a>
    <a class="instagram" href="https://instagram.com" target="_blank" title="Instagram"><i class="fa-brands fa-instagram"></i>&nbsp Instagram</a>
    <a class="twitter" href="https://twitter.com" target="_blank" title="Twitter"><i class="fa-brands fa-twitter"></i>&nbsp Twitter</a>
  </div>
</div>

<div class="footer">
  <p id="footerdesc">Made with love by BS INDUSTRIES! Check out my social media: </p>
</div>

Answer 1

祝你好运，尝试在页脚选择器中添加以下属性。


position: fixed;
width: 100%;
bottom: 0;

.footer { 
  position: fixed;
  width: 100%;
  bottom: 0;
  display: block;
  overflow: hidden;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: rgb(250, 186, 113);
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  background-color: rgb(54, 54, 54);
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top: 3px solid rgb(250, 186, 113);
  border-bottom: 3px solid rgb(250, 186, 113);
  filter: saturate(2);
}

Answer 2

将以下代码添加到 .footer 会将页脚放在屏幕底部。我会解释代码是如何工作的，但我认为你最好在 well-made 教程中学习定位。

（代码会将页脚放在屏幕底部；如果您滚动，页脚将留在屏幕底部。如果您希望页脚位于页面底部，可能会隐藏根据滚动位置，请在您的问题中进行说明。）

position: fixed;
bottom: 8px;
left: 8px;
right: 8px;

HTML / CSS - 底部居中页脚

HTML / CSS - Centering FOOTER at the Bottom

html

javascript

css

visual-studio-code

bootstrap-4