如何让文本精准对齐在图片下方并移除右侧多余空白

两个布局异常的直接原因：

• 给body硬编码1440px固定宽度，视口尺寸和该值不匹配时，必然出现多余空白、横向滚动条问题
• 容器内子元素宽度设置逻辑混乱：图片宽度设为父容器的50%，下方两个文本段落宽度仅设为父容器的45%，同时段落保留了浏览器默认外边距，既没有和图片保持同宽，也没有统一对齐规则，自然无法精准落在图片正下方
• 图片作为行内替换元素默认按基线对齐，底部会预留微小缝隙，进一步干扰对齐精度

不需要调整HTML主体结构，仅需先修正一处笔误：将head中谷歌字体引入链接里的wght@400@700改为wght@400;700，否则700粗细的粗体样式不会生效。之后直接替换原有CSS代码即可：

/* 全局重置盒模型、内外边距，从根源消除浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 删除固定宽度，设置最小高度占满整个视口 */
  min-height: 100vh;
  /* 用flex布局实现卡片在页面垂直+水平居中，适配所有屏幕尺寸 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(212, 45%, 89%);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
}

.bold {
  font-weight: 700;
  color: hsl(218, 44%, 22%);
  font-size: 1.4rem;
  /* 控制标题和图片、下方说明文本的间距 */
  margin: 22px 0 16px;
  padding: 0 14px;
}

img {
  /* 图片宽度撑满容器内容区，和容器保持同宽 */
  width: 100%;
  height: auto;
  border-radius: 12px;
  /* 转为块级元素消除行内元素默认基线缝隙 */
  display: block;
}

.container {
  /* 给卡片设置固定合理宽度，不再靠子元素撑开尺寸 */
  width: 320px;
  background-color: hsl(0, 0%, 100%);
  padding: 16px;
  border-radius: 20px;
  /* 容器内所有文本统一居中对齐 */
  text-align: center;
  /* 添加轻微阴影匹配设计稿的悬浮效果 */
  box-shadow: 0 10px 28px rgba(31, 50, 81, 0.1);
}

.context {
  color: hsl(220, 15%, 55%);
  padding: 0 14px 22px;
  line-height: 1.4;
}

修改完成后刷新页面即可看到符合预期的效果：QR码卡片自动在页面正中央居中，图片撑满卡片内边距后的可用宽度，上下两段文本和图片左右边距完全对齐，页面右侧不会出现多余空白，也不会触发横向滚动条。

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