礼拜一-礼拜五:09.00 早上-06.00 下午

新闻动态

不同字号文字和图标怎样对齐同一条基线:机制分析第11例

2026-11-15

一行元素的外框居中并不意味着文字看起来对齐。文字往往同时向基线上方和下方延伸,用共同基线安排位置,可以把不同字号和图标的上下空间明确算出来。

先明确输入与规则

本例每个元素给出基线上方高度和下方深度,均为非负整数。每行需要的上方空间取所有元素上方高度的最大值,下方空间取最大深度;该行基线为行顶加最大上方空间。元素顶为基线减自身上方高度,底为基线加自身下方深度。

本例的独立记录

首行顶坐标7,额外行距3。每项指标依次为基线上方高度和下方深度。

第0行:顶7,基线22,底28。 元素指标 | 基线对齐顶底 | 外框居中顶 | 居中相对位移 [4, 6] | 18,28 | 25/2 | -11/2 [3, 2] | 19,24 | 15 | -4 [15, 3] | 7,25 | 17/2 | 3/2 [14, 3] | 8,25 | 9 | 1 第1行:顶31,基线46,底52。 元素指标 | 基线对齐顶底 | 外框居中顶 | 居中相对位移 [12, 0] | 34,46 | 71/2 | 3/2 [15, 5] | 31,51 | 63/2 | 1/2 [10, 6] | 36,52 | 67/2 | -5/2 [10, 3] | 36,49 | 35 | -1 第2行:顶55,基线69,底74。 元素指标 | 基线对齐顶底 | 外框居中顶 | 居中相对位移 [6, 2] | 63,71 | 121/2 | -5/2 [14, 2] | 55,71 | 113/2 | 3/2 [7, 5] | 62,74 | 117/2 | -7/2 [8, 5] | 61,74 | 58 | -3

记录中的编号只用来区分本例对象,不应与大小排名或另一组记录的身份混淆。先核对单位和边界,再跟随中间值检查结果。空结果、零值与尚未确定是不同状态;分数保留精确含义,显示小数只为方便阅读。

怎样复算

所有元素必须落在行框内,且各自从顶往下量自身上方高度时到达同一个基线。下一行在上一行框底部再加给定行距开始,因此只要行距非负,两个行框不会重叠。

逐项比较基线对齐结果与外框居中的位置差,检查差异是否来自下方深度。不要把整行最大上方空间强行当成每个元素自身的上方高度,否则短元素会被错误拉伸。布局应移动位置,不能为了对齐偷偷改变元素尺寸。

适用条件与限制

这些指标已经由输入给出,本例不根据字体字号猜测真实字形范围,也不处理字体渲染、字距或换行。图标若要看起来视觉居中,可能还需人工偏移;几何基线一致与主观视觉感受不是完全相同的目标。

练习时可以一次只改变一个条件,比较差异从哪个步骤开始。若自己的结果不同,先核对是否采用同样的规则,再定位第一个不一致的中间状态,不要只修改最终答案。输入与运算过程需要一起保存,才能判断结论究竟适用于哪一个具体场景。