label与input垂直错位主因是基线不一致，应包裹于flex容器并设align-items:center，统一vertical-align:middle，清除line-height干扰，禁用HTML废弃对齐属性。

HTML 标签本身不负责对齐控制，所有对齐行为必须交由 CSS 处理；用 align 或 valign 属性写在标签上属于 HTML5 废弃做法，现代项目中应完全避免。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

label 和 input 垂直对齐错位怎么修

错位根源是 <label></label>（内联）和 <input>（baseline 对齐）默认基线不一致，不是“没设 height”或“字体大小不同”这种表层问题。

• 给每组 <label></label> + <input> 包一层 <div class="form-row">，并设 <code>display: flex; align-items: center;
• <label></label> 加 flex: 0 0 120px;（固定宽度防换行），<input> 加 flex: 1; min-width: 0;
• 统一清除所有表单控件的 vertical-align：在全局 CSS 中加 input, select, textarea, button { vertical-align: middle; }
• 避免给父容器设 line-height，它会干扰基线计算；如有必要，显式写 line-height: normal;

table 整体居中总失败？别碰 align="center"

<table align="center"> 是浮动模拟居中，不是块级居中，且在 flex 容器、grid 布局或严格模式下直接失效。 <ul><li>最简可靠方案：<code><table style="margin: 0 auto; width: 800px;"> —— 必须带 <code>width，否则 auto 无效

• 无固定宽需求时，用包裹 <div style="display: flex; justify-content: center;"><table></table></div>
• 若需兼容 IE11，text-align: center + display: inline-table 可作为 fallback，但不要混用
• 检查父容器是否设置了 display: grid 或 display: flex，它们会覆盖 margin: 0 auto 行为

td 内容水平/垂直对齐只认 text-align 和 vertical-align

align 和 valign 属性虽还能被浏览器解析，但优先级混乱、跨浏览器不一致，且无法作用于 <colgroup></colgroup> 或伪类选择器。

立即学习“前端免费学习笔记（深入）”；

• 整列对齐用 <colgroup></colgroup>：<col style="text-align: right">，它比 td:nth-child(3) 更稳定（尤其有 colspan 时）
• vertical-align: middle 要生效，单元格得有可测量高度：要么设 height / min-height，要么内容撑开（如多行文本+line-height）
• 金额列右对齐建议加 font-family: monospace 或 font-variant-numeric: tabular-nums，否则小数点无法对齐
• 避免在同一个 <td> 上同时写 <code>align="right" 和 style="text-align: left"，Chrome 和 Safari 解析顺序不同

  真正难处理的不是“怎么对齐”，而是“对齐依赖哪些前提条件”——比如 vertical-align 需要高度支撑，margin: 0 auto 需要宽度，flex 布局需要父容器显式声明。漏掉任一前提，CSS 就会静默失效，而不是报错。