Bootstrap3与Django项目中图片水平居中布局问题求助

这问题我之前做项目时也碰到过！Bootstrap 3的栅格系统默认基于浮动实现，所以不管图片数量多少，都会从左往右排列，单张图自然就靠左了。要实现无论图片数量多少都水平居中，这里有两个实用的方案，你可以根据需求选择：

方案1：用Flexbox（简洁现代，推荐） #

Bootstrap 3本身没集成Flexbox，但我们可以给外层的row添加自定义CSS，把它变成Flex容器，轻松实现居中：

首先修改模板代码，给row加一个自定义类（比如image-row）：

<div class="row image-row">
  {% for image in images %}
    {% if image.image %}
      <div class="col-lg-4 col-md-4 col-xs-4 thumb">
        <img class="img-responsive" src="{{ image.image.url }}" />
      </div>
    {% endif %}
  {% endfor %}
</div>

然后在项目自定义CSS文件中添加以下样式：

.image-row {
  display: flex;
  flex-wrap: wrap; /* 保持图片在小屏幕上自动换行 */
  justify-content: center; /* 核心：让子元素水平居中 */
  /* 抵消Bootstrap row默认的负margin，避免页面横向溢出 */
  margin-left: -15px;
  margin-right: -15px;
}

这个方案代码简洁，Flexbox的布局逻辑直观，现在主流浏览器都支持，除非你需要兼容IE9及以下这类老旧浏览器，否则优先选这个。

方案2：用inline-block兼容旧浏览器 #

如果需要兼容不支持Flexbox的旧浏览器，可以用inline-block代替浮动，配合text-center实现居中：

模板代码和上面一致，给row加image-row类，然后CSS改成：

.image-row {
  text-align: center; /* 让inline-block子元素居中 */
  margin-left: 0;
  margin-right: 0;
}
.image-row .thumb {
  float: none; /* 取消Bootstrap col默认的浮动 */
  display: inline-block;
  vertical-align: top; /* 让图片顶部对齐，避免高低不齐 */
  margin-left: -4px; /* 消除inline-block元素之间的默认空白间隙 */
}

这个方案兼容性更好，但需要处理inline-block的间隙问题，代码稍显繁琐。

额外小提示 #

• 记得把自定义CSS放在Bootstrap样式文件之后，这样才能覆盖默认样式。
• 如果你的图片大小不一，还可以给img添加img-thumbnail类，让图片带个边框，视觉上更整齐。

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