label居中需分场景：水平居中表单整体用flex+justify-content:center；label与input垂直对齐用form-row+flex+align-items:center；仅文字居中则text-align:center+display:block。

元素本身不“居中”，它只是文本容器；所谓“label 居中”，实际是指它在表单布局中的视觉位置居中——比如水平居中于页面、或与 垂直居中对齐。关键不是给 单独加 text-align，而是控制它所处的布局上下文。

label 水平居中整个表单区域

这不是让单个 label 文字居中，而是把整组表单（含 label + input + button）作为整体水平居中到页面或容器中。

• 最稳妥的是用 display: flex 包裹
  或其直接父容器，再加 justify-content: center
• 避免用 text-align: center 作用于
  ——若内部元素是 display: block（如默认 ），它不会生效；必须配合 display: inline-block 才能触发，但易引发换行、间隙等副作用
• 如果表单有固定宽度（如 width: 400px），margin: 0 auto 仍可靠，但需确保父容器是块级且未被 flex 或 grid 覆盖

label 和 input 垂直居中对齐（同一行内）

这是最常见的“对不齐”问题：label 看起来比 input 高，或 checkbox 偏上。根源是浏览器对不同元素的 vertical-align 和基线处理不一致。

• 不要给 单独设 line-height 或 padding 去“调位置”——这会破坏响应性，且在不同字体/缩放下失效
• 正确做法是把每组 + 包进一个
  ，并设 display: flex; align-items: center
• 为 加 flex: 0 0 120px（固定宽度防换行）， 加 flex: 1; min-width: 0（自适应填满）
• 显式重置所有表单控件的 vertical-align: middle 是冗余操作——flex 已接管对齐，加了反而可能冲突

label 文字内容本身居中（仅限文字）

当 label 是独立展示（如标题式说明、无关联控件），才需要让其中文字居中。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 直接用 text-align: center 即可，但前提是 label 是块级或 inline-block
• 若 label 默认是 inline（标准行为），需先加 display: block 或 display: inline-block，否则 text-align 不生效
• 注意：移动端小屏下，过宽的 label 文字居中后可能溢出容器，建议配合 max-width 和 word-break: break-word

容易被忽略的兼容性细节

Flex 布局虽主流，但在某些旧版 WebView 或企业内网环境仍有 fallback 需求；Grid 更简洁但 IE 完全不支持。

• gap 在 flex 中部分老 Android WebView 不支持，用 margin-right 替代更稳
• min-width: 0 对 flex: 1 的 input 很关键——否则 Safari 下长 URL 或邮箱可能撑破容器
• label 关联 for 和 id 必须严格匹配，否则无障碍阅读器无法聚焦对应控件，再美观也失去意义
• 所有表单控件（包括 ）应显式声明 type 属性， 缺省为 submit，可能意外触发表单提交