为何CSS中text-align对span生效却不对img生效？

先贴出你的代码方便分析：

CSS代码 #

body {
  text-align: center;
}

HTML代码 #

<body>
  <span>Today is Nick's birthday 🎉</span>
  <img id="bff-img" src="nick.jpg">
  <h2>24 years old</h2>
  <h4>01.11.2022</h4>
</body>

核心逻辑与问题排查 #

你对text-align: center的理解是对的——它确实用来控制块级元素内部内联/内联块级元素的水平对齐。span是标准内联元素，会被这个属性居中；而img默认是内联块级元素，理论上也应该被居中。如果你的img没居中，大概率是以下某类额外因素影响：

• img被设置为块级元素：如果你的其他CSS代码里给#bff-img加了display: block，它就变成了块级元素，text-align对块级元素完全无效，此时需要用margin: 0 auto来实现居中。
• img存在异常边距或浮动：要么是浏览器默认样式给img加了边距，要么是你自己写的样式里加了margin/padding/float，这些属性会把img从居中位置挤开。
• 图片加载失败：如果nick.jpg的路径错误，img会显示一个小占位框，这个框本身是居中的，但因为宽度太小，视觉上看起来像没居中。
• body宽度未占满视口：如果body被父元素限制了宽度，那text-align: center只是在body的宽度范围内居中，自然不会出现在页面正中间。

快速验证与修复方法 #

打开浏览器开发者工具（按F12）选中img元素，检查这几点：

1. 确认display属性是默认的inline-block
2. 排查margin/padding/float有没有异常值
3. 检查图片路径是否正确，是否成功加载

如果是因为img被设为块级元素，直接修改CSS即可：

#bff-img {
  /* 恢复内联块级默认值，继续用text-align居中 */
  display: inline-block;
  /* 或者保留块级，用margin方式居中 */
  /* margin: 0 auto; */
}

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