页脚导航栏未垂直居中问题：请求修复与其他元素对齐

我看了你的代码，问题出在导航栏里的<ul>默认带有浏览器内置的margin和padding，而且列表项<li>默认是块级元素会垂直排列，这就导致导航区域高度超出了页脚的50px，看起来像是紧贴底部，没法和另外两个元素垂直对齐。

下面是具体的修复方案：

1. 重置导航列表的默认样式 #

给.footer-nav ul添加样式，去掉默认边距、内边距和列表圆点，同时让列表项横向排列：

.footer-nav ul {
  list-style: none; /* 移除列表前的圆点 */
  margin: 0;
  padding: 0;
  display: flex; /* 让<li>横向排列 */
  gap: 16px; /* 给导航项之间添加间距，提升美观度 */
}

2. 优化页脚的CSS #

你的.footer样式里有个可能干扰布局的属性，同时确保高度设置合理：

• 移除margin-bottom: -25px，这个负边距会导致页脚布局偏移，破坏垂直对齐效果
• 保留height: 50px，现在导航改为横向排列后，高度不会超出这个值

修改后的.footer CSS：

.footer{
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  margin: 0 auto;
  align-items: center;
  background: #000000;
  color: #fff;
  height: 50px;
}

完整修复后的代码 #

<style>
.footer{
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  margin: 0 auto;
  align-items: center;
  background: #000000;
  color: #fff;
  height: 50px;
}
.footer-nav a{
  font-size: 16px;
  text-decoration: none;
  color:#fff;
  position: relative;
}
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
}
.mac{
  text-decoration: none;
  color: #fff;
}
</style>
<div class="footer">
 <nav class='footer-nav'>
 <ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="careers.html">Careers</a></li>
 <li><a href="contact.html">Contact</a></li>
 </ul>
 </nav>
 <span>Website Designed by <a class='mac' href='https://machooper.com'>Mac Hooper</a></span>
 <span>Copyright &copy Vegan Restaraunt</span>
</div>

这样修改后，导航栏的列表项会横向排列，去掉了默认的多余边距，整个导航区域高度和页脚匹配，再配合align-items: center，就能和另外两个元素完美垂直居中对齐，形成整齐美观的页脚啦！

内容的提问来源于stack exchange，提问作者Mac Hooper