Shopify中如何用HTML、CSS实现带文字图库居中且不缩小图片

你当前遇到的两个核心问题，根源都在原有代码的布局逻辑上：

• .gallery 用了float: left浮动定位，子元素脱离了常规文档流，父容器#container根本感知不到三个画廊块的实际总宽度，自然没法把整个画廊组在页面上居中
• .gallery img 设置了width:100%强制缩放，搭配原本330px的.gallery固定宽度，600px的原图会被硬压成330px，这就是之前试的居中方案都要求把图片调得很小的原因

不需要压缩原图尺寸，只要替换原有布局逻辑，就能实现“图片保留原尺寸并排、整个画廊组在页面居中”的效果，改完的代码可以直接粘贴到Shopify的自定义HTML区块、主题代码片段中使用：

<style>
/* 父容器：自动匹配画廊总宽度，实现整体居中 */
#container {
  width: max-content; /* 宽度自动适配三个画廊块的总宽度，不强制拉满页面 */
  margin: 0 auto; /* 让整个画廊组在页面父级区块居中 */
  display: flex; /* 替代float实现并排布局，无文档流脱离问题 */
  gap: 30px; /* 画廊块之间的间距，可根据视觉需要调整 */
  padding: 20px 0;
}
div.gallery {
  margin: 0; /* 移除原有硬边距，靠gap统一控制间距 */
  border: 0;
  text-align: center;
  flex-shrink: 0; /* 关键：禁止flex布局压缩块宽度，完整保留图片原尺寸 */
  width: auto; /* 移除原有330px固定宽度，适配图片实际大小 */
}
div.gallery:hover {
  border: 0;
}
div.gallery img {
  max-width: 100%; /* 不强制缩图，只在移动端限制最大宽度防止溢出 */
  height: auto;
  /* 你写在img标签里的600x400原图尺寸会在桌面端完整保留显示 */
}
div.desc {
  padding: 9px;
  text-align: center;
  display: block; 
  margin: 0 auto;
}
/* 移动端适配：小屏幕下自动换成纵向排布，避免横向溢出 */
@media (max-width: 768px) {
  #container {
    flex-direction: column;
    width: 90%;
  }
}
</style>

<div id="container">
  <div class="gallery">
    <a target="_blank" href="img.jpg">
      <img src="img.jpg" alt="Select Your Flavors" width="600" height="400">
    </a>
    <div class="desc"><h3>Choose Your Flavors</h3></div>
    <div class="desc">
      <p>Text</p>
      <div class="center-section"><a class="btn button" href="">Find Your Box</a></div>
    </div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img.jpg">
      <img src="img.jpg" alt="Get Your Box" width="600" height="400">
    </a>
    <div class="desc"><h3>Get Your Box</h3></div>
    <div class="center-section">
      <a class="btn button" href="">Find Your Box</a>
    </div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img.jpg">
      <img src="img.jpg" width="600" height="400">
    </a>
    <div class="desc"><h3>text</h3></div>
    <div class="center-section"><a class="btn button" href="">Shop Now</a></div>
  </div>
</div>

• width: max-content 是整体居中的核心：如果父容器强制设为100%宽度，三个画廊块会被均分摊满整行，没法把整个画廊组作为整体居中；用max-content后，父容器宽度刚好等于三个画廊块加间距的总宽度，再配合margin:0 auto，就能实现画廊组整体在页面居中的效果
• flex-shrink: 0 是保留原图尺寸的核心：flex布局默认会在空间不足时压缩子元素宽度，加这个属性后，每个画廊块都会按图片实际尺寸显示，不会被压缩
• 把原来的img {width:100%}改成max-width:100%，既保证桌面端完整显示原图尺寸，又能在移动端自动适配屏幕宽度，不会出现横向滚动条

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