jQuery实现图片悬停缩放时，其他图片垂直偏移问题求助

这个偏移问题的核心在于图片默认的垂直对齐规则和你当前用的定位方式冲突了：

• 图片(<img>)默认是inline-block元素，浏览器对这类元素的默认垂直对齐方式是baseline（基线对齐）。当某张图片放大到120px高度时，它的基线位置会被拉高，容器内其他图片会跟着基线一起偏移，导致看起来“被挤到底部”。
• 你给图片加的position: relative; top: 50%; transform: translateY(-50%);本来是想实现垂直居中，但inline-block的基线对齐优先级会干扰这个定位效果，导致只有在所有图片高度一致时才生效，一旦有图片高度变化，其他元素的基准位置就乱了。

推荐两种靠谱的解决思路，其中第二种用Flex布局是最稳定的：

方案1：修正垂直对齐规则（轻量修改） #

只需要给图片添加vertical-align: middle;，同时确保容器的line-height和height一致，就能让所有图片始终保持垂直居中，不受单张图片缩放的影响：

修改你的CSS：

#spaceTrainingImages {
    position: relative;
    height: 120px;
    background-color: snow;
    line-height: 120px; /* 新增：让行高等于容器高度 */
}
.spaceTrainingPic {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    vertical-align: middle; /* 新增：强制垂直居中对齐 */
}

方案2：用Flex布局重构（更稳定） #

Flex布局天生就是为了解决这类对齐问题而生的，完全可以替代你原来的relative+transform定位，代码更简洁，效果也更可靠：

修改CSS：

#spaceTrainingImages {
    display: flex; /* 改为flex容器 */
    align-items: center; /* 垂直居中所有子元素 */
    height: 120px;
    background-color: snow;
}
.spaceTrainingPic {
    /* 移除原来的position、top、transform属性 */
    width: 30px;
    height: 40px;
}

你的jQuery和悬停逻辑不需要任何修改，Flex布局会自动让所有图片保持垂直居中，哪怕某张图片放大，其他图片的位置也不会受影响。

内容的提问来源于stack exchange，提问作者whatamess