本文介绍如何通过 css flexbox 解决 navbar 中 logo 与导航链接垂直错位问题，重点在于设置 .topnav 为 display: flex、修正图片默认基线间隙，并精准控制选择器作用范围。
本文介绍如何通过 css flexbox 解决 navbar 中 logo 与导航链接垂直错位问题，重点在于设置 .topnav 为 display: flex、修正图片默认基线间隙，并精准控制选择器作用范围。
默认情况下，HTML 中的 <img> 和 <a> 元素均为块级或内联元素，在普通文档流中容易因基线对齐（baseline alignment）和默认外边距/内边距产生视觉错位——典型表现为 logo 下方留白、导航文字上浮，无法严格水平居中对齐。
最可靠且语义清晰的解决方案是采用 CSS Flexbox 布局。只需将容器 .topnav 设为弹性容器，并启用垂直居中能力：
.topnav {
display: flex;
align-items: center; /* 关键：使所有子元素在交叉轴（垂直方向）居中对齐 */
background-color: #333;
overflow: hidden;
border-top: solid rgb(30, 128, 255);
border-bottom: solid rgb(30, 128, 255);
font-family: Arial;
width: 100%;
text-align: center;
padding-top: 1.75%;
padding-bottom: .75%;
}同时，必须处理 logo 图片的固有渲染行为：<img> 默认为内联元素，会与文本按基线对齐，底部自动保留约 4px 空隙。为此，需显式设置其父容器 #navbar 内的 img 为块级：
#navbar img {
display: block; /* 消除图片下方默认空白 */
}此外，原选择器 .topnav a 会同时匹配 logo 链接（<a href="index.html"><img ...></a>）和导航链接，导致 logo 容器也被应用了 padding 和 width: 20% 等样式，破坏布局。应改用子选择器 .topnav > a，仅作用于 .topnav 的直接子级 <a> 标签（即四个导航项），排除嵌套在 #navbar 中的 logo 链接：
.topnav > a {
color: #f2f2f2;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
width: 20%;
}⚠️ 注意事项：
- 不要对 .topnav 设置 text-align: center 作为水平居中手段（Flexbox 下无效且易混淆），如需整体居中可配合 justify-content: center；
- 避免混合使用 float 与 Flexbox，已注释掉的 float: left 应彻底移除；
- 若需响应式适配，建议后续为小屏幕添加 flex-wrap: wrap 及媒体查询，而非依赖固定 width: 20%。
最终效果：logo 与文字链接严格在同一水平线上居中对齐，间距均匀可控，布局健壮且易于维护。
