hen多人第一反应是 align-items: center;。 但center 对齐是几何对齐，而人眼对一行内容的感知往往是排版对齐，你懂的。

img参与 inline 排版时默认会以基线对齐，但它的基线往往表现为“底部边缘附近”，再加上行高空间，就会出现底部缝隙或视觉偏移，害。

咱就是说这时候你Ke以试试 Flexbox 里的 align-items: baseline; .row { display: flex; align-items: baseline; gap: 8px;}

这会让同一行内的 flex items 的基线对齐，说实话，hen有用。

你Ke以把它想成小学写字本上的那条线：字不一定dou一样高，但它们的“落脚点”一致，挺形象的。

在Zuo UI 的时候，我们经常遇到一种“明明对齐了但kan起来不齐”的情况：左边图标 + 右边文字，它们虽然数学上是对齐的，但视觉上总觉得差点什么。

在排版里基线Ke以理解为：一行文字“站着”的那条隐形线。 大部分字母会“坐”在这条线上，而像 g、p 这种有下行部件的字母会“掉”到基线下面不对不对，应该是大部分字母会站在这条线上，有些字母会超出这条线。

img, svg { vertical-align: middle; /* 或 baseline/top/bottom 视情况 */}

或者直接把图标变成 flex item，由 flex baseline 控制，这样就不用担心那些 replaced elements 的基线问题了。

行高决定了文字盒子高度，但基线位置不一定在盒子正中。 Ru果你把 line-height 设得hen大，再用 center 对齐，就geng容易“kan起来不齐”，所以说center 对齐有时并不靠谱。

Grid 也支持 baseline，但各浏览器实现细节可Neng略有差异。 一般在组件里Flex geng常见，所以咱主要还是讲 Flex 那一套，你懂的。

这篇文章会把基线对齐讲清楚：它是什么、为什么重要、在 Web/CSS 里怎么用、常见坑怎么躲，希望你Neng有点收获，哈哈。

中文字体和英文字体混用、fallback 字体切换、数字字体不同，dou可Neng影响基线与视觉重心，所以说排版这事儿挺复杂的。

经验 同一行里只要有文字参与，默认优先考虑基线对齐，会geng“像排版”，geng稳，说实话，这是实践出来的结论。

优先用 baseline：

Ru果你是图标 + 文本组合，强烈建议用 baseline 对齐。 举个典型场景：左边图标 + 右边文字

.icon { width: 16px; height: 16px;} .row { display: flex; align-items: baseline; }

优先用 center：

.icon { width: 16px; height: 16px; transform: translateY; /* 微调 ~2px hen常见 */}

x-height 不同？视觉重心不同？

x-height 不同是指不同字体家族里小写 x 的高度比例不同，进而影响视觉上的“中心点”。 x-height 越大，kan起来越“大”或越“突出”。你要是想搞清楚 x-height 是啥，Ke以去查查资料，反正挺有用的。

"完美" 对齐hen难，因为影响因素太多了比如字体选择、字号大小、行间距，甚至浏览器的渲染差异dou会影响Zui终效果，那咋办？咱就是说只Neng不断微调呗，总Neng找到个相对合适的解决方案吧，你懂的！ 多尝试几种方案，总Neng搞出个让人满意的效果来！