如何解决导航栏（Navbar）中Logo与导航链接无法垂直对齐的问题？

问题根源 #

当前#navbar是块级元素，默认独占一行，加上.topnav的百分比内边距，导致Logo和导航链接的垂直空间分配不均，出现上下空白错位的情况。

修复步骤 #

• 将#navbar设置为inline-block，使其和导航链接处于同一行流中
• 给#navbar和.topnav a添加vertical-align: middle，强制垂直居中对齐
• 调整.topnav的内边距为固定值（避免百分比导致的高度偏差），同时移除不必要的text-align: center
• 确保图片本身没有额外的外边距或内边距

修改后的CSS代码 #

#navbar{
  display: inline-block; /* 改为行内块元素，取消独占一行 */
  vertical-align: middle; /* 与导航链接垂直居中对齐 */
  margin: 0; /* 清除默认外边距 */
}

.topnav{
  background-color: #333;
  overflow: hidden;
  border-top: solid rgb(30, 128, 255);
  border-bottom: solid rgb(30, 128, 255);
  font-family: Arial;
  width: 100%;
  padding: 8px 0; /* 改用固定内边距，避免百分比高度偏差 */
}

.topnav a {
  display: inline-block; /* 改为行内块，便于对齐控制 */
  color: #f2f2f2;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  width: 18%; /* 微调宽度，避免总宽度超出容器 */
  vertical-align: middle; /* 与Logo垂直居中对齐 */
}

额外优化建议 #

• HTML中图片路径的反斜杠\改为正斜杠/，避免跨平台路径兼容问题：

  <img src="Images/christopher-avallon-high-resolution-logo-transparent.png" height="50px" width="auto">
  

• 若需要更灵活的布局控制，推荐用Flexbox重构.topnav（无需再设置inline-block和vertical-align）：

  .topnav{
    display: flex;
    align-items: center; /* 自动垂直居中所有子元素 */
    justify-content: flex-start; /* 元素左对齐，如需居中改为center */
    gap: 10px; /* 控制元素间间距 */
    background-color: #333;
    border-top: solid rgb(30, 128, 255);
    border-bottom: solid rgb(30, 128, 255);
    font-family: Arial;
    width: 100%;
    padding: 8px 16px;
  }
  

内容的提问来源于stack exchange，提问作者Christopher Avallon