HTML/CSS-在底部居中FOOTER

我試圖將頁腳放在頁面的底部中心，但沒有任何效果，我不知道它是否是阻止它下降的代碼，但我確信它是！

我是 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>

uj5u.com熱心網友回復：

祝你好運，嘗試在頁腳選擇器中添加以下屬性。

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);
}

uj5u.com熱心網友回復：

添加以下代碼.footer會將頁腳放在螢屏底部。我會解釋代碼是如何作業的，但我認為你最好在一個制作精良的教程中學習定位。

（代碼會將頁腳放在螢屏底部；如果滾動，頁腳將留在螢屏底部。如果您希望頁腳位于頁面底部，可能會根據滾動位置隱藏，請在你的問題中澄清。）

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

標籤：javascript html css 视觉工作室代码 引导程序 4

上一篇：使用角度上的不同按鈕列印選擇和添加的菜肴串列

下一篇：為什么我的背景圖片不適合我的div容器