行内元素水平居中唯一可靠方式是给其块级父容器设置text-align: center；直接对行内元素设margin: 0 auto或justify-content无效，因其不响应这些属性，且text-align作用对象是父容器内部的行内内容而非元素自身。
行内元素（如 <span>、<a>、<u>、纯文本）本身不响应 margin: 0 auto 或 justify-content，直接给它加居中样式必然无效——这不是 bug，是盒模型行为决定的。
text-align: center 必须作用在父块级容器上
行内内容的水平居中，唯一可靠路径是控制它的“容器”。text-align 不是让行内元素自己居中，而是告诉它的**块级父元素**：「你内部的行内内容，请按此规则对齐」。
- 错误写法：
<span style="text-align: center">文字</span>→ 无效，<span>是行内元素，没有可对齐的“内部空间” - 正确写法：
<div style="text-align: center"><span>文字</span></div>→ 有效，<div>是块级容器，提供对齐上下文 - 如果父元素是
<p>、<header>、<section>等默认块级标签，同样适用 - 注意：
text-align对子元素中的块级元素（如嵌套的<div>）无影响；若需居中块级子元素，得另用margin: 0 auto或 Flex
行内元素被强制设为 display: block 后，不能再靠 text-align 居中
一旦把 <span> 改成 display: block，它就脱离了行内流，变成独立块，此时 text-align 对它自身不再起作用——它已不是“行内内容”，而是“块级子元素”。
- 现象：
<div style="text-align: center"><span style="display: block">文字</span></div>→ 文字仍左对齐 - 原因：
<span>现在是块级，占据整行宽度，text-align只影响其内部文字（如果有），不影响它自身位置 - 解决：要么撤掉
display: block，回归行内语义；要么给该<span>单独设margin: 0 auto（前提是显式设了width）
图片、图标等 inline-block 元素也遵循同一规则
<img> 默认是 display: inline-block，行为介于行内与块级之间：它能换行，但有宽高、可设 margin。它的水平居中逻辑和纯行内元素一致——靠父容器的 text-align: center。
立即学习“前端免费学习笔记（深入）”；
- 常见误区：给
<img>加margin: 0 auto→ 失效，因为它是 inline-block，不是块级 - 正确做法：
<div style="text-align: center"><img src="..."></div> - 额外注意：
vertical-align: middle可调图片基线，避免因默认 baseline 导致视觉偏下；但这是垂直对齐，不影响水平居中逻辑
不要试图用 flex 或 absolute 强行“修正”行内元素居中
给行内元素父容器加 display: flex，再对子元素用 justify-content，看似能居中，实则改变了整个布局模型——而且容易引发连锁问题。
- 风险点：父容器变 flex 后，所有直系子元素自动成为 flex item，
float、vertical-align、甚至text-align都可能失效 - 更隐蔽的问题：如果父容器里混有纯文本和其他行内元素，flex 会把文本节点也当 flex item 处理，导致换行异常或空格塌陷
- 真正需要 flex 的场景，是「多个块级元素并排居中」或「需要垂直+水平同时居中」；单个行内内容，
text-align更轻量、更语义清晰
最容易被忽略的一点：行内元素居中从来不是“元素自己动”，而是“父容器安排它怎么放”。混淆这个主从关系，所有尝试都会绕远路。
