Post #227

@taoky42 问了我一个我也遇到过很多次的问题：CSS 怎么在 inline layout 中让一个小图片和旁边的文本垂直居中对齐？vertical-align: middle 会把图片的中央对齐到周围文字的 x height 中央，而这个属性目前没有值能对齐到 cap height 中央或者汉字中央。 一个方法是把图片前后的文字分别包进 span 标签，让文字和图片是平级节点，然后在所有平级节点上指定 vertical-align: middle。但这样会把文字基线全都搞乱，还需要把文字分别包起来，并不是好主意。 最终我发现了这篇（排版非常漂亮的！）博客 https://blog.kizu.dev/cap-height-align/ 其中说的第一种方法我觉得就足够好了： vertical-align: middle; margin-block-start: calc(1ex - 1cap); 我做了一些测试确认它在图片和文字有各种尺寸关系、不同尺寸文字混排、不同 line height 等情况下都有正确的效果，非常不错。我能想到的注意事项： 1. 如果 cap height 中央和汉字中央不一致，它只能对齐到前者。我看了一遍相关 CSS 单位，后者好像做不到，但我的经验是很多字体中这二者基本是一致的。 2. 只适用于 inline layout，如果在 flex layout 等情况下已经用别的方案实现了对齐，重复使用这个会破坏对齐。 （如果不要求 inline layout，也就是说不需要图片和文字混合在一起换行，那就简单多了。例如要对齐一个按钮上的图标和文字，别用这个方法，用 flex。）