如何用transform-origin控制缩放元素的对齐位置

vertical-align: top 对于 transform: scale() 缩放后的元素无效，因为它仅影响行内布局中的基线对齐；真正控制缩放锚点的是 transform-origin 属性，其默认值为 center，必须显式设置为 top 才能使缩放后元素顶部对齐。

开发者常遇到一个问题：为图片或图标设置 vertical-align: top 后，使用 transform: scale() 进行缩放时，元素仍然下沉，无法对齐。原因何在？

答案很简单：vertical-align 属性的作用范围有限。它仅对行内级（inline）或表格单元格（table-cell）元素生效，控制元素在当前行框（line box）内的垂直对齐方式，与父容器的定位无关。因此，若 .phone 元素的父容器采用 Grid 布局，vertical-align: top 将被忽略。

更隐蔽的问题是：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 将按顶部对齐缩放，视觉位置稳定可控，符合预期，避免布局问题。