在日常的网页界面设计中，图标与文本对齐是常见的美观需求。line-height和 vertical-align 是实现精准对齐的核心属性。本文从原理到实操，提供可复制的代码片段，帮助你在各种图标尺寸与字体之间保持一致的对齐效果。
1. 对齐的核心原理
1.1 行内元素的对齐基线
在行内元素中，基线决定了文字与图标的对齐起点，当图标与文本在同一行时，若基线不一致，就会产生上下错位的视觉效果。通过把 line-height 设置为统一的高度，并将 vertical-align 设为 middle，可以实现视觉上的居中对齐，从而避免浮动的错位。
为了确保不同字号下的对齐依然稳定，需要使用相对单位（如 em、rem）来绑定 line-height 与字体大小的关系。这能让图标的高度与文本的高度在缩放时保持一致，避免跨设备的错位。
1.2 vertical-align 的取值与坑点
vertical-align 是影响行内元素垂直对齐的关键属性。vertical-align: middle 常用于与 display: inline-block 搭配使用的场景，它会让图标与文本在行内的垂直方向上实现居中对齐。另一个常用取值是 baseline，即默认的基线对齐，适合某些字体与图标高度相近的情况。
一个常见的坑点是不要单独使用 margin 或 padding 来“推”对齐，因为这会影响文本的可访问性和缩放行为，且在不同字号或无障碍模式下效果会不稳定。正确的做法是通过调整 line-height 与 vertical-align 的组合来实现稳定的对齐。
2. 用 line-height 调整图标高度以匹配文本
2.1 统一行高的技巧
最简单的思路是让图标的高度等于文本的“行高单位”并让两者在同一行内对齐。可以将图标设置为 inline-block，并将其 width 与 height 设置为 1em，使其大小随文本字体自动缩放；同时对文本和图标都应用相同的 vertical-align 值以保证垂直对齐。
/* 举例：图标随文本字号缩放且居中对齐 */
.icon, .text {display: inline-block;vertical-align: middle;
}
.icon {width: 1em;height: 1em;background: url('icon.svg') no-repeat center / contain;
}
.text {font-size: 1em;line-height: 1.6;margin-left: 0.25em;
}
要点：使用 em 单位让图标与文本在同一字号体系下协调缩放，避免硬编码像素导致的错位；保持 vertical-align: middle，使两者在视觉上中心对齐。
2.2 通过 font-size 与 line-height 的关系实现精确对齐
不同文本段的行高需要在视觉上与图标的高度成比例。通过将文本的 font-size 设置为合适的值，并把 line-height 调整到一个与图标高度匹配的数值，可以实现跨段落的一致对齐。
/* 文本行高与图标高度的匹配示例 */
.text {font-size: 16px;line-height: 1.6; /* 与图标高度的视觉比例保持一致 */
}
.icon {display: inline-block;width: 1em;height: 1em;vertical-align: middle;
}
实战要点：1em 的图标尺寸随文本字号变化，确保在不同字号下的对齐稳定；使用合适的 line-height 形成稳定的行盒高度。
3. 复杂场景的对齐策略
3.1 解决不同分辨率的对齐
在响应式布局中，字号可能随屏幕变化，若图标高度不随字号一起缩放，容易出现错位。此时应将图标的高度设为 1em，而文本的 line-height 尽量设置为一个稳定的数值（如 1.6 或 1.5 之类的倍数关系），从而实现跨设备的对齐一致性。
另一个做法是将 icon 与文本放在同一个容器中，并对容器应用 line-height 与 vertical-align 的组合来统一控制，而不是逐元素逐字号地硬编码数值。
3.2 使用数据图标（SVG/字体图标）时的对齐要点
若图标是基于字体图标或内嵌 SVG，关键在于确保它们的 display、width、height 与 line-height 的关系一致。将图标设为 inline-block，并将其 vertical-align 设置为 middle，可以在图标与文本之间取得稳健的对齐。
下面的示例展示了如何在同一行中搭配一个字体图标和文本，确保两者的基线与中线对齐且可缩放：
<p class="item"><span class="icon" aria-hidden="true"></span><span class="label">收藏</span>
</p>/* 对齐设置示例（字体图标 + 文本） */
.item {font-size: 16px;line-height: 1.6;
}
.icon {display: inline-block;width: 1em;height: 1em;vertical-align: middle;/* 如果使用 SVG 作为背景图，可保持 background 相关属性 */
}
.label {display: inline-block;vertical-align: middle;margin-left: 0.25em;
}
要点总结：无论是字体图标还是 SVG 图标，确保 inline-block、vertical-align、以及与文本相同的字体体系，都是实现精准对齐的关键。
