如何让无序列表中的图标与文本在同一水平线上对齐-html教程-PHP中文网

本文介绍使用 Flexbox 替代 inline-block 解决无序列表中图片和文本垂直对齐错位的问题，通过 display: flex、align-items: center 等属性实现精准水平居中对齐。

本文介绍使用 flexbox 替代 inline-block 解决无序列表中图片和文本垂直对齐错位的问题，通过 `display: flex`、`align-items: center` 等属性实现精准水平居中对齐。

在构建顶部导航栏时，常需将多个图标（如音量、语言、网络）与系统时间文本并排显示于右上角。但若直接使用 display: inline-block 布局

元素，极易出现图标与文字基线不齐、上下错位等问题——这源于浏览器默认的 vertical-align: baseline 行内对齐机制，以及与纯文本在行框（line box）中渲染高度差异所致。

推荐方案：采用 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 动态更新：