我完全懂你要的效果——整个图片画廊容器在页面里稳稳居中，但里面的图片得保持左对齐排列，而不是跟着容器一起居中挤成一团。之前直接给#gallery加text-align: center导致图片也居中了，确实踩了个常见的小坑。

给你两种靠谱的解决方案，都是通过分层控制对齐逻辑来实现的：

方案一：经典嵌套容器法（兼容性好） #

核心思路是用两层容器拆分职责：外层管整体居中，内层管图片左对齐。

HTML结构 #

<div id="gallery">
  <div class="gallery-inner">
    <img src="your-image-1.jpg" alt="图片描述1">
    <img src="your-image-2.jpg" alt="图片描述2">
    <img src="your-image-3.jpg" alt="图片描述3">
    <!-- 更多图片 -->
  </div>
</div>

CSS样式 #

#gallery {
  text-align: center; /* 让内层容器水平居中 */
  max-width: 1200px; /* 可选：限制画廊最大宽度，避免屏幕过宽时图片太分散 */
  margin: 0 auto; /* 配合max-width实现更稳妥的水平居中 */
}

.gallery-inner {
  display: inline-block; /* 让内层容器仅包裹内容宽度，从而被外层的text-align:center拉动居中 */
  text-align: left; /* 强制内部图片左对齐 */
  width: 100%; /* 可选：让内层占满外层的max-width，控制每行图片数量 */
}

.gallery-inner img {
  margin: 8px; /* 给图片加间距更美观 */
  width: 220px; /* 自定义图片尺寸 */
  height: auto; /* 保持图片比例 */
}

方案二：Flexbox现代法（推荐响应式场景） #

用Flexbox可以更简洁地实现，不需要依赖text-align，逻辑更清晰：

CSS样式（HTML结构和方案一一致） #

#gallery {
  display: flex;
  justify-content: center; /* 让内层内容水平居中 */
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-inner {
  display: flex;
  flex-wrap: wrap; /* 图片超出宽度时自动换行 */
  justify-content: flex-start; /* 图片左对齐排列 */
  width: 100%;
}

.gallery-inner img {
  margin: 8px;
  width: 220px;
  height: auto;
}

两种方案都能完美实现你要的效果：整个画廊容器在页面居中，里面的图片整齐左对齐排列。你可以根据自己的项目兼容性需求选择~

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