html - 如何使底部导航栏居中？

Question

你好，我在我的网页上添加了一个 HTML 和 CSS 代码的底部导航栏，但我希望它位于网站底部的中心，非常感谢任何帮助和解决方案，我附上了 HTML、CSS 代码和网页的屏幕截图非常感谢我的导航栏当前位于左侧的位置。

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin: 0px auto;
}

.navbar a:hover {
  background: #f1f1f1;
  color: black;
}

<div class="navbar">
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">Facebook Page</a>
</div>

HTML 导航栏代码

CSS 导航条代码

网页导航栏

Answer 1

只需将您的 CSS 代码替换为以下 CSS 代码即可:

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.navbar a {
  color: #f2f2f2;
  text-align: center;
  display: inline-block;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin: 0px auto;
}

.navbar a:hover {
  background: #f1f1f1;
  color: black;
}

和您的 HTML 代码:

<div class="navbar">
  <div class="navbar-inner">
     <a href="#">About</a>
     <a href="#">Contact</a>
     <a href="#">Facebook Page</a>
  </div>
</div>

希望这段代码能像你期望的那样工作..