为何text-align:center与margin:0 auto失效？图片下方文字无法居中如何解决

DevOps 小满

2026-5-25

解决图片下方文字无法居中的问题

我帮你捋清楚这个问题的根源和解决办法啦：

问题原因

当你用小尺寸图片时，虽然img-fluid让图片实现响应式，但img-thumbnail会给图片加内边距和边框，再加上图片本身宽度小于父容器col-md-6，导致图片没有撑满列宽。这时候你给文字加的居中样式，因为文字容器没占满父容器宽度，看起来就没生效；而大图片本身宽度足够撑满col-md-6，所以文字跟着“看起来居中”了。另外嵌套的img-thumbnail（外层div和img标签各一个）会产生双重内边距，也会干扰布局。

具体解决方案

用Bootstrap内置工具类快速居中
Bootstrap自带text-center工具类，直接给文字所在的容器加上这个类，就能确保文字在父容器内居中，不用自己写额外CSS：
```
<div class="text-center">hello world</div>
```
确保文字容器占满父列宽度
如果自定义样式的话，给文字容器（比如你的.bodytitle）加上width: 100%，让它撑满col-md-6的宽度，text-align:center就能正常生效：
```
.bodytitle {
  text-align: center;
  width: 100%;
}
```

清理冗余的图片样式
你代码里外层div和img标签都用了img-thumbnail，这会导致双重内边距和边框，建议去掉外层div的这个类，避免布局偏移：

<div class="blogborder"> <!-- 去掉这里的img-thumbnail -->
  <div class="row">
    <div class="col-md-6">
      <div class="bodytitle text-center">Title</div>
      <img class="rounded img-fluid img-thumbnail" src="你的图片地址">
      <div class="text-center">hello world</div>
    </div>
  </div>
</div>