表格单元格内浮动元素不响应text-align，因float使元素脱离文档流，而text-align仅作用于块级容器内的行内内容；正确做法是用text-align和vertical-align控制对齐。
浮动元素本身不响应 text-align
表格单元格（<td> 或 <code><th>）里加了 <code>float: left 或 float: right，再设 text-align: center 是无效的。因为 float 会让元素脱离文档流，而 text-align 只作用于**行内内容在块级容器内的对齐**，对已浮动的子元素无控制力。
用 text-align 对齐文字，用 float 控制布局？别混用
常见误操作是想“既让文字居中，又让整个单元格右贴边”，结果给 <td> 加 <code>float。这会破坏表格渲染模型——表格单元格本就不该浮动，浏览器可能忽略 float、或导致列宽错乱、甚至塌陷。
-
float属于传统文档流脱离方案，和表格的自动对齐/等高/重排机制天然冲突 - 真需要“单元格整体右移”，应改用
margin-left: auto（配合display: table-cell时需注意父级限制）或更现代的justify-content（但需切换为display: flex） - 纯文字对齐：直接在
<td> 上设 <code>text-align: center或text-align: right即可，无需浮动替代方案：用
text-align+vertical-align覆盖绝大多数需求95% 的表格对齐问题，靠这两个属性就够了：
td { text-align: right; /* 水平：左/中/右 */ vertical-align: middle; /* 垂直：top/middle/bottom */ }如果目标是“某几列右对齐数字”，直接写：
立即学习“前端免费学习笔记（深入）”；
td.number, th.number { text-align: right; padding-right: 8px; }注意：
vertical-align对<table> 本身无效，只对 <code><td>、<code><th>、<code><tr> 生效；<code>text-align在<table> 上设置会被子元素继承，但最好显式写在 <code><td> 级别，避免意外覆盖。<h3>非要浮动？先确认是否真的需要脱离表格流</h3> <p>极少数场景（比如在单元格内叠加图标+文字并右对齐），可对单元格**内部元素**浮动，而非单元格自身：</p><pre class="brush:php;toolbar:false;"><td> <span class="icon">★</span> <span class="label">重要</span> </td></pre><pre class="brush:php;toolbar:false;">.icon { float: right; margin-left: 4px; } .label { /* 不浮动，自然占据剩余空间 */ }</pre><p>此时 <code>text-align仍可作用于<td> 内非浮动内容。但要注意清除浮动（如加 <code>overflow: hidden到<td>），否则高度可能塌陷。<p>表格单元格不是普通块容器，浮动它等于主动放弃表格语义和默认对齐能力。多数所谓“对齐失败”，其实是没意识到 <code>text-align和vertical-align的作用域，或者把布局责任错交给浮动。
