.container {display: flex;justify-content: flex-start; /* 改为左对齐 */align-items: center;gap: 40px;padding: 20px;flex-wrap: nowrap;min-width: 480px;max-width: 1200px; /* 添加最大宽度 */margin: 0 auto; /* 容器居中 */}

.qr-item {text-align: center;flex: 0 0 auto;}

.qr-item img {width: 200px;height: 200px;margin-bottom: 10px;}

.qr-description {font-size: 16px;color: #333;margin: 0;}

/* 响应式设计 */@media screen and (max-width: 480px) {.container {flex-direction: row;min-width: auto;gap: 20px;padding: 10px;}

.qr-item img {width: 150px;height: 150px;}}

主要修改：

将 container 的 justify-content 从 center 改为 flex-start，使内容左对齐添加了 max-width 和 margin: 0 auto 来控制整体容器的宽度并使其在页面中居中保持了 qr-item 内部的文字居中对齐（text-align: center）调整了响应式设计中的padding值，使其在小屏幕上更合理

现在二维码和文字会：

整体靠左对齐排列每个二维码项内部的图片和文字保持居中保持左右并排的布局在不同屏幕尺寸下都能正常显示

这样的布局应该符合您的要求，既保持了整体的左对齐，又保持了每个二维码项内部的居中对齐效果。

专业的成都网站建设你可以找成都南奇网络科技有限公司 www.cdnanqi.cn 来帮你做

两个二维码图片，左对齐样式html和css实现   https://cdnanqi.cn/wangluoyingxiao/16874.html