浮动元素内文字居中需直接在该元素上设text-align:center，而非父容器；若子元素脱离文本流（如用float、absolute等）则不受影响，此时需单独处理子元素居中。
浮动元素内部文字不居中？先确认你真在对浮动盒子设 text-align: center
很多人试了 text-align: center 没用，其实是加错了地方——它必须写在**浮动元素自身**的样式里，而不是它的父容器。浮动不会让 text-align 失效，但它会让父容器“塌陷”，导致你以为样式没生效。
- 错误做法：给浮动盒子的父级加
text-align: center，而父级又没设高度或清除浮动，视觉上文字还是左对齐 - 正确做法：直接在浮动盒子（比如
<div class="box">）上写 <code>text-align: center - 注意：
text-align只影响**行内内容**（文字、<img alt="CSS如何使得浮动后的盒子内部文字居中_在浮动元素本身使用text-align: center" >、<span></span>等），对块级子元素无效 - 常见陷阱：盒子内嵌了一个
<div> 子块，并希望它也居中，但只靠父级 <code>text-align: center不行 - 解决方向：子块要居中，得单独处理，比如加
margin: 0 auto（需有宽度）、或改用display: inline-block配合父级text-align - 验证方法：临时给浮动盒子加个背景色和边框，看清文字和子元素的实际渲染位置
- 兼容性没问题：所有浏览器都支持浮动和
text-align的组合 - 性能无负担：纯 CSS 渲染，不触发重排（re-layout）
- 更稳妥的替代：用
display: inline-block+ 父级text-align: center，或直接上display: flex+justify-content: center - 真实场景建议：仅用于兼容 IE8/9 的遗留项目，或极简图文卡片（如带图标的按钮）
- 典型现象：文字明明只有几个字，却紧贴左边，右边大片空白
- 快速排查：用开发者工具选中浮动盒子，看 computed 样式里
width是多少，再看content实际宽度（含空格、换行） - 解决办法：给文字容器加
white-space: nowrap，或删掉多余空格/换行；若需折行，改用max-width限制宽度再居中 - 小技巧：临时加
outline: 1px solid red能立刻看清浮动盒子的真实尺寸边界
为什么有时候加了 text-align: center 还是不居中？检查子元素是否脱离了文本流
如果浮动盒子内部有子元素用了 float、position: absolute 或 display: flex，它们就不再受 text-align 控制了——因为 text-align 只作用于“参与当前行内格式化上下文”的内容。
浮动 + text-align: center 在现代布局中是否还值得用？
能用，但不推荐作为首选方案。浮动本意是图文环绕，不是做整体布局；强行用它来“固定位置再居中”，容易引发清除浮动、塌陷、响应式错位等问题。
float 元素里文字居中，但右边多出空白？可能是换行或空格惹的祸
浮动盒子宽度不够、内容含空格或换行符时，text-align: center 会把整行当一个单元居中，看起来像“右偏”或“留白异常”。这不是 bug，是浏览器按标准盒模型计算的结果。
立即学习“前端免费学习笔记（深入）”；
text-align，但会让布局上下文变模糊；真正卡住人的，往往是没意识到“居中”针对的是哪一层内容、以及那一层是否还处于文本流中。
