text-align只对块级元素（如p、div、td）生效，作用于其内部行内内容；加在span、a等行内元素上无效，且在flex/grid容器或浮动/绝对定位干扰下会失效。
text-align 为什么加在
上没反应
不是所有标签加 text-align 都能生效——它只对块级元素（display: block 或 display: table-cell）起作用，且只影响其内部的行内内容。如果你给一个 <span></span> 或 <a></a> 加 style="text-align: right"，浏览器会忽略，因为它们默认是行内元素。
常见错误现象：
- 写了
<p style="text-align: center">文字</p>，但文字还是左对齐 - 富文本编辑器点了“居中”按钮，预览时没变化
原因通常是：该 <p> 被父容器设了 display: flex 或 display: grid，此时 text-align 失效；或者编辑器输出的 HTML 实际套在 <div contenteditable> 里，而这个根容器没设宽度、没触发块级渲染上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具检查目标元素的
computed样式，确认text-align是否被覆盖或未生效 - 确保它所在的最近块级祖先有明确宽度（比如
width: 100%或max-width），否则居中无参照 - 避免在 flex 容器里依赖
text-align控制子项位置，改用justify-content和align-items
table 里的 align 和 valign 到底谁管谁
align 和 valign 是 HTML4 遗留属性，在 HTML5 中已废弃，但浏览器仍支持。它们的作用对象和范围非常具体，不能混用。
关键区别：
-
<table align="center">：控制整张表在页面中的**浮动位置**（类似float），不是内容对齐；现代写法应为margin: 0 auto -
<tr align="right">：等效于给该行所有<td>加align="right"，即水平右对齐单元格内容 -
<td valign="middle">：仅控制该单元格内内容的**垂直对齐**，值只能是top/middle/bottom/baseline；<table>上加valign完全无效
容易踩的坑：
- 误以为
<table align="center">能让表格内容居中——它只是让表格自己“飘”到中间，内容仍是左对齐 - 在
<th>上用valign="center"没效果，因为<th>默认就是text-align: center，但垂直对齐仍需显式设valign或 CSS 的vertical-align - 用
align="justify"——这个值根本不存在，align只接受left/center/right
表单元素 label 和 input 怎么真正对齐
默认情况下，<label> 和 <input> 看起来“错位”，不是 bug，而是它们基线（baseline）不一致导致的视觉偏差。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
典型表现：
- label 文字底部和 input 框底边不在同一水平线
- input 后面跟 button，button 明显下沉
根本原因是：<input> 默认 vertical-align: baseline，而 label 是文本流元素，line-height 影响其基线位置。
实操建议（推荐 flex 方案）：
- 把每组
<label>+<input>包进一个<div class="form-row"> - CSS 设
.form-row { display: flex; align-items: center; gap: 0.5em; } - 给
<label>设固定宽度（如flex: 0 0 120px），避免换行挤压 - 禁用
float或inline-block布局——它们会让对齐更不可控
不要做：
- 给 input 单独加
margin-top微调——响应式下立刻失效 - 依赖
vertical-align: middle单独修复——在不同字体、不同浏览器下表现不一
富文本编辑器输出的对齐为什么总“不生效”
富文本编辑器（如 Quill、TinyMCE、CKEditor）生成的 HTML 通常带 class（如 ql-align-center），但这些 class 不自带样式——你得自己提供对应 CSS 规则，否则点击「居中」等于白点。
核心问题在于：对齐样式必须挂载在**块级容器**上，且不能被更高优先级规则覆盖。
排查步骤：
- 检查编辑器输出的 HTML，看对齐类是否真的加到了
<p>或<div>上，而不是<span> - 确认你引入的 CSS 文件里有没有定义
.ql-align-center { text-align: center; } - 如果富文本内容塞在
<iframe>里（如邮件编辑器），CSS 必须注入到 iframe 的<head>，外层页面样式无效
最稳的兜底方式：
- 给富文本根容器（比如
<div id="editor">）直接加style="text-align: center;"，它会继承给所有后代块级元素 - 若编辑器强制输出内联
style（如<p style="text-align: right">），注意它的权重高于外部 class，但低于!important（慎用）
复杂点往往藏在嵌套层级里：富文本里一段文字可能被包在 <p><span><strong> 三层里，text-align 只在 <p> 层有效，<span> 和 <strong> 上设了也没用。
