vertical-align用于内联或表格单元格元素的垂直对齐，常用值包括baseline、top、middle、bottom等；通过设置img{vertical-align:middle}可实现图文居中，inline-block元素可通过vertical-align统一对齐方式，table-cell元素可利用该属性实现内容垂直居中。
label里文字和图标怎么垂直居中对齐
直接给 label 加 vertical-align: middle 没用——label 默认是 inline 元素，但它的子元素（比如 <i class="icon"></i> 或 <img alt="HTML中label元素文字图标怎么一起居中" >）若没统一 display 类型，基线就各走各的。浏览器按 baseline 对齐，图标“坐”在文字底部，看着就像悬空或下沉。
- 确保图标和文字都在同一行内流：给图标加
display: inline-block，文字部分保持默认 inline 即可 - 显式设置
label的line-height（如line-height: 1.5），再配合vertical-align: middle，比只靠 vertical-align 更稳 - 避免在
label内嵌套<div> 或设 <code>float—— 这些会让子项脱离行内流，vertical-align 失效 - 如果用了字体图标（如 Bootstrap Icons），确认
<i></i>没被额外设成display: block；它得保持inline才能响应内置的vertical-align: -.125em - 把文字和图标包进一个
<span></span>，再给这个span设display: flex; align-items: center; gap: 4px -
label本身保持原语义和默认 display，只负责关联控件，不参与对齐逻辑 - 如果 label 必须包含 input（如
<label><input type="checkbox">同意</label>），那就别强求整个 label flex 居中，改为对 input 和相邻文字分别控制：input 设vertical-align: middle，文字用span包裹并同步设vertical-align: middle - IE11 下若发现图标被压缩，加
flex-shrink: 0到图标元素上 - 给
label、input、select、textarea、button统一设vertical-align: middle - 父容器（如
<div class="form-row">）设 <code>line-height: normal，避免继承的 line-height 干扰基线计算 - 不要用
margin-top或padding-top“手动调位置”——一旦字号变化或换字体，立刻错位 - 如果用了自定义 SVG 图标，确保它没有 viewBox 缩放偏差；必要时加
height: 1em; width: 1em;并设vertical-align: -0.125em微调 - 图标用了
display: block，脱离了行内流，text-align穿透不过去 -
label被父容器设了display: flex或display: grid，此时text-align直接失效，得改用justify-content: center - 文字被包在
<p></p>或<div> 里，而这些块级子元素不受 <code>text-align影响，除非它们自己也设了text-align: center - 你其实想让整个
label在页面中水平居中——那该控制它的父容器，而不是label本身
用 flex 布局让 label 内容真正可控居中
align-items: center 在 label 上直接生效的前提是：它得是 flex 容器。但注意——label 默认不是块级容器，不能直接设 display: flex 后还指望它正常包裹表单控件（比如 <input>）。所以真要用 flex，得把结构微调：
表单场景下 label + input 怎么整体垂直居中
单独搞 label 内部对齐意义不大，实际项目里更常见的是 label 文字+图标 和它右边的 input、select 不对齐。这时候 vertical-align 是最轻量解法：
为什么 text-align: center 在 label 里不管用
text-align: center 控制的是**行内内容的水平对齐**，不是垂直方向，也不是“让 label 自己在页面中居中”。它只对 label 的直接子级中属于行内流的部分起作用。如果你看到文字没居中，大概率是因为：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：图标和文字的 font-size 不一致时，vertical-align 的“middle”基准会偏移。哪怕只差 0.1rem，视觉错位就很明显。建议所有同组元素统一用 font-size: 1rem 或相对单位（如 em），再微调 vertical-align 数值。
