HTML/CSS新手求助：网页图片仅桌面居中，移动端左偏问题

解决方向 #

• 图片设置了固定宽度1020px，当移动端屏幕宽度小于该值时，text-align: center无法让超出容器的图片居中，这是左偏的核心原因。
• 调整思路：让图片自适应容器宽度，同时通过CSS强制保证水平居中，还要清理HTML代码里的语法错误。

需添加到<head>的CSS代码 #

/* 重置logo容器默认边距，避免额外偏移 */
#logo {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 让图片自适应容器，保持比例且不超出原尺寸 */
#logo img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* 强制水平居中，兼容性更强 */
}

附带HTML代码修正 #

原代码中img标签存在多余引号，修正后：

<div id="logo">
  <div>
    <img src="https://www.thesourcesmoothjazzradio.com/images/TheSourcelogo.png" width="1020" height="175" alt="电台Logo"/>
  </div>
</div>

（注：原代码里的text-align: center可删除，CSS中的margin: 0 auto已能稳定实现居中效果）

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