怎样正确使用 transform-origin 控制缩放元素的对齐位置

vertical-align: top 对 transform: scale() 缩放后的图像无效，因其仅影响行内布局中的基线对齐；真正决定缩放锚点的是 transform-origin，默认为 center，需显式设为 top 才能使缩放后元素顶部对齐。

`vertical-align: top` 对 `transform: scale()` 缩放后的图像无效，因其仅影响行内布局中的基线对齐；真正决定缩放锚点的是 `transform-origin`，默认为 `center`，需显式设为 `top` 才能使缩放后元素顶部对齐。

在 CSS 中，vertical-align 属性仅对行内级（inline）或表格单元格（table-cell）元素生效，且它控制的是元素在其当前行框（line box）内的垂直对齐方式，而非相对于父容器的绝对定位。因此，当你对 .phone 元素设置 vertical-align: top 时，若其父容器未形成有效的行框环境（例如父级是 display: grid），该声明将被忽略——这正是问题的根本原因。

更关键的是：transform: scale(0.65) 默认以元素中心点为缩放原点，导致图像视觉上“下沉”，即使 vertical-align 生效，也无法抵消缩放带来的位移。解决方法是显式指定缩放原点：

.phone {  display: inline-block;     /* 确保 vertical-align 可作用（但非必需） */  transform: scale(0.65);  transform-origin: top;     /* ✅ 关键：让缩放从顶部开始，保持顶部对齐 */}.ig-logo {  display: inline-block;  transform: scale(0.35);  transform-origin: top;     /* 同样适用于 logo */}

⚠️ 注意事项：

• transform-origin: top 等价于 transform-origin: 50% 0，表示 X 轴居中、Y 轴顶端；
• 若需精确对齐到左上角，可写 transform-origin: top left；
• 在 Grid 布局中，vertical-align 本身不生效，应优先使用 Grid 自身的对齐属性（如 align-self: start）配合 transform-origin；
• 避免混合使用 vertical-align 和 transform 来实现定位——推荐统一用 transform-origin + transform 或 Grid/Flex 的原生对齐能力。

综上，修正后的 .phone 和 .ig-logo 将真正按顶部对齐缩放，视觉位置稳定可控，既符合预期又具备良好兼容性。