text-align: center对多个label无效，因它只控制块级容器内行内内容对齐，不改变label自身位置；label默认inline且宽度自适应，导致虽内部文字居中但整体左对齐参差不齐。

别用 float，也别靠 text-align 硬凑——并列对齐失效，90% 是因为没搞清“谁对齐谁”。

为什么 text-align: center 对多个 不起作用

因为 text-align 只控制块级容器内部的行内内容对齐，不控制容器自身位置。多个 默认是 inline 元素，各自宽度由文字撑开，text-align: center 只让每个 label 里的文字居中，但 label 本身仍在父容器里左对齐、参差不齐。

• 错误写法：
  姓名邮箱
  + div { text-align: center; }
• 正确思路：让所有 label 在统一网格中按列对齐，不是各自“居中”
• 必须包裹结构：
  姓名

display: flex 是并列对齐最稳的解法

给父容器设 display: flex，子元素自动同行；用 justify-content 控制水平分布，align-items 控制垂直基准线，gap 管理间距——三者配合，几乎覆盖全部并列场景。

DeepBI DHTML 页面生成器

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

下载

• 两端对齐（如导航栏）：justify-content: space-between，且子元素不能设 flex: 1 或 width: 100%
• 底部对齐（如多图+标题）：align-items: flex-end，比 vertical-align: bottom 更可靠
• 响应式断行备用：flex-wrap: wrap，小屏下自动换行，避免挤压溢出
• IE 不支持 gap？加 fallback：margin-right: 0.5rem 并在最后一个子项上清除

用 display: inline-block 的前提和坑

它适合按钮、图标、标签这类需保留块级特性又想并排的元素，兼容性好（IE8+），但细节容易翻车。

• HTML 标签间换行/空格会渲染成空白间隙 → 写成
  紧挨着，或用注释
• 默认 vertical-align: baseline，导致一高一低 → 统一设 vertical-align: top 或 middle
• 父容器字体大小影响间隙 → 设 font-size: 0，再在子元素里单独设 font-size
• 别混用：inline-block 和 flex 嵌套时，对齐逻辑会打架，优先选一种方案到底

真正难的不是“怎么并排”，而是并排后各元素的默认 margin、line-height、基线差异带来的隐性错位——flex 容器能屏蔽大部分，但一旦嵌套或混用 display 类型，错位就立刻浮现。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！