求助：如何使3张图片水平居中排列？附现有HTML代码

嘿，我来帮你搞定这个图片布局的需求！你现在的问题是三张图片默认垂直排列，我们可以通过调整HTML结构结合Bootstrap原生类，或者自定义CSS Flexbox来实现水平居中排列，下面给你两种实用方案：

方案一：利用Bootstrap栅格系统（推荐，无需额外CSS） #

Bootstrap的栅格系统本身就支持响应式布局，我们只需要把每张图片放到单独的列容器里，再让整个行居中即可：

修改后的HTML代码：

<div class="sidBilder">
  <div class="row justify-content-center">
    <div class="col-sm-12">
      <div class="row">
        <!-- 每张图片单独占一列，响应式适配不同屏幕 -->
        <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
          <img class="img-fluid d-block mx-auto" src="img/gapamatch.jpg" alt="Gapamatch">
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
          <img class="img-fluid d-block mx-auto" src="img/laget18.jpg" alt="Laget18">
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
          <img class="img-fluid d-block mx-auto" src="img/Kamratgarden.jpg" alt="Kamratgarden">
        </div>
      </div>
    </div>
  </div>
</div>

关键说明： #

• justify-content-center：给最外层的row添加这个类，让内部的列容器整体水平居中
• col-lg-4 col-md-6 col-sm-12：设置响应式列宽，大屏幕（lg）下三列平分宽度，中等屏幕（md）下两列，小屏幕（sm）下单列垂直排列，适配不同设备
• mb-3：Bootstrap的margin-bottom类，让小屏幕下图片之间有合适的间距
• d-block mx-auto：替代你原来的imgCenter类，让图片在各自的列容器内水平居中

方案二：自定义Flexbox CSS（适合不想大幅修改HTML的情况） #

如果不想调整太多HTML结构，我们可以给包含图片的容器添加Flexbox样式：

第一步：修改HTML（给图片容器加个类） #

<div class="sidBilder">
  <div class="row">
    <div class="col-sm-12">
      <div class="row">
        <div class="col-sm-12 col-lg-4 image-group">
          <img class="img-fluid" src="img/gapamatch.jpg" alt="Gapamatch">
          <img class="img-fluid" src="img/laget18.jpg" alt="Laget18">
          <img class="img-fluid" src="img/Kamratgarden.jpg" alt="Kamratgarden">
        </div>
      </div>
    </div>
  </div>
</div>

第二步：添加CSS样式 #

.image-group {
  display: flex;
  justify-content: center; /* 让图片组整体水平居中 */
  gap: 1.5rem; /* 图片之间的间距，可根据需求调整 */
  flex-wrap: wrap; /* 小屏幕下自动换行，避免溢出 */
  align-items: center; /* 垂直方向对齐图片（如果图片高度不同） */
}

.image-group img {
  max-width: calc(33.333% - 1rem); /* 限制图片宽度，刚好占容器三分之一减去间距 */
  height: auto; /* 保持图片比例 */
}

关键说明： #

• display: flex：把容器转为Flex容器，内部图片自动水平排列
• justify-content: center：实现图片组在容器内的水平居中
• flex-wrap: wrap：确保屏幕宽度不足时图片自动换行，提升移动端体验
• max-width：控制每张图片的宽度，避免过大或过小

两种方案都能实现你的需求，方案一更贴合Bootstrap的设计理念，维护起来更方便；方案二灵活性更高，适合需要自定义布局细节的场景。

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