本文介绍使用 Flexbox 替代 inline-block 解决无序列表中图片和文本垂直对齐错位的问题，通过 display: flex、align-items: center 等属性实现精准水平居中对齐。
本文介绍使用 flexbox 替代 inline-block 解决无序列表中图片和文本垂直对齐错位的问题，通过 `display: flex`、`align-items: center` 等属性实现精准水平居中对齐。
在构建顶部导航栏时，常需将多个图标（如音量、语言、网络）与系统时间文本并排显示于右上角。但若直接使用 display: inline-block 布局
推荐方案：采用 Flexbox 布局替代传统 inline-block
将 .nav-list 设为弹性容器，可彻底规避基线对齐陷阱，并提供更可控、语义清晰的布局能力：
.nav-list {
display: flex; /* 启用 Flex 布局 */
justify-content: flex-end; /* 内容右对齐 */
align-items: center; /* 垂直居中对齐所有子项 */
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-list li {
margin-left: 6px;
padding: 0 2px;
}
.nav-list img {
filter: invert(100%);
-webkit-filter: invert(100%);
width: 18px;
height: auto;
vertical-align: middle; /* 辅助兼容性，但非必需（flex 已主导对齐） */
}同时，在 HTML 中建议为时间文本单独添加语义化 ID（如 id="system-time"），便于后续 JavaScript 动态更新：
<ul class="nav-list"> <li><img src="speaker.svg" alt="Volume"></li> <li><img src="globe.svg" alt="Language"></li> <li><img src="wifi.svg" alt="Network"></li> <li id="system-time">Tue 9 Jan 20:18</li> </ul>
✅ 关键优势说明：
- align-items: center 强制所有
- （无论含
还是纯文本）沿交叉轴（此处为垂直方向）居中对齐；
- 不再依赖 vertical-align 或 line-height 等易受字体/行高干扰的属性；
- 移除冗余的 margin: 0 重置（已在父级统一控制），提升 CSS 可维护性；
- Flex 容器天然支持响应式伸缩，未来扩展图标或动态插入元素更稳健。
⚠️ 注意事项：
- 避免在
标签中误用 href 属性（HTML 规范中
不支持该属性，应移除）；
- 若需兼容 IE10/11，可添加 -ms-flexbox 前缀，但现代项目建议优先支持 Flexbox 标准语法；
- 时间文本建议后续通过 JavaScript 实时刷新，并添加 aria-live="polite" 提升无障碍体验。
综上，Flexbox 是解决此类“图文同线”问题最简洁、可靠且符合现代前端实践的方案。
