如何用 Flexbox 实现图标与文字垂直居中对齐

本文介绍如何利用 CSS Flexbox 的 display: inline-flex 和 gap 属性，轻松解决图标与相邻文本（如“Logout”）上下错位、无法水平对齐的问题，告别手动调 margin 的繁琐调试。

本文介绍如何利用 css flexbox 的 `display: inline-flex` 和 `gap` 属性，轻松解决图标与相邻文本（如“logout”）上下错位、无法水平对齐的问题，告别手动调 margin 的繁琐调试。

在 Web 开发中，图标与文字并排显示时出现高度不一致（如图标偏高、文字下沉），是常见布局问题。根本原因在于 <img> 是内联替换元素，默认按基线（baseline）对齐，而 <span> 文本也遵循相同规则，导致视觉上未居中。

推荐方案：使用 Flexbox 实现精准对齐

将容器设为 display: inline-flex，即可天然启用弹性布局，使子元素（图标和文字）沿主轴（默认为水平）排列，并自动在交叉轴（垂直方向）居中对齐：

.dropdown-content {  display: inline-flex;  align-items: center; /* 关键：确保垂直居中 */  gap: 0.5rem;         /* 控制图标与文字间距，替代手动 margin */  background-color: yellow;  padding: 1rem 2.5rem;}#logout-icon {  width: 20px;  height: auto; /* 保持宽高比，避免拉伸 */}

HTML 结构保持简洁，无需额外 wrapper 或伪元素：

<div>  <div class="dropdown-content">    <img id="logout-icon" src="https://cdn.icon-icons.com/icons2/2518/PNG/512/logout_icon_151219.png" alt="Logout">    <span>Logout</span>  </div></div>

✅ 关键要点说明：

• align-items: center 是实现垂直居中的核心声明，它让所有子项在交叉轴（Y 轴）上居中对齐；
• gap 比 margin 更语义化、更易维护，避免父子间外边距合并问题；
• 建议为 <img> 添加 alt 属性，提升可访问性；
• 若需适配响应式，可将 gap 改为 rem 或 em 单位，便于缩放控制。

⚠️ 注意：避免混用 float、vertical-align 或旧式 line-height 方案——它们依赖行高计算，易受字体、字号影响，稳定性差。Flexbox 提供了现代、可靠且语义清晰的解决方案。