调整浏览器窗口大小时navbar-logo组件发生偏移问题求助

问题根因 #

1. 响应式断点（≤1300px）下的.navbar-logo样式逻辑错误：你给logo设置了position: absolute搭配transform: translate(25%, 50%)，其中水平方向25%的偏移是相对于logo自身宽度计算的，和你全局.container设置的padding-left: 50px不匹配，窗口宽度变化时相对偏移的基准会发生变化，直接导致logo错位。
2. JSX中img标签的position='flex'是无效属性（flex是display的取值，不属于position的可选值），虽然不是偏移的核心原因，但属于冗余错误属性。

修复方案 #

1. 替换CSS媒体查询段内的.navbar-logo样式：

/* 把原来的这段删掉 */
.navbar-logo {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(25%, 50%);
}

/* 替换为下面的代码 */
.navbar-logo {
  position: absolute;
  top: 50%;
  left: 50px; /* 和.container的padding-left取值保持一致，对齐全局左边界 */
  transform: translateY(-50%); /* 仅做垂直居中，水平方向用固定边距避免相对偏移 */
}

2. 删除JSX中img标签上的无效属性position='flex'即可。

修复后logo在窗口缩小时会和桌面端保持一致的左对齐逻辑，不会再出现偏移问题。

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