星号与文字 baseline 不齐的解决方法是给星号添加 vertical-align: -0.1em；同时需兼顾可访问性，用 aria-required="true" 或 sr-only 文本标明必填。
label 里的 * 和文字 baseline 不齐怎么办
默认情况下，<label>姓名<span style="color:red;">*</span></label> 中的星号会比文字略高，尤其在 Chrome 或 Safari 下明显——这是因为 * 是 Unicode 符号（U+002A），其字体度量与中文字体/英文无衬线体的 baseline 对齐逻辑不同，不是“上下居中”，而是按字体自身的 ascender/descender 基准渲染。
实操建议：
- 给星号加
vertical-align: middle;或vertical-align: -0.1em;（更精准） - 避免用
display: inline-block+line-height拉齐，容易破坏 label 可访问性 - 如果 label 内含
<input>，确保整个行内流高度一致：统一设置line-height: 1.5;并让星号继承 - 推荐写法：
<label>姓名<span style="color:red; vertical-align: -0.1em;">*</span></label>
表单整体水平居中但 label/input 不对齐
很多人用 text-align: center; 包住整个 <form></form>，结果发现 label 左对齐、input 居中、星号飘偏——这不是居中失效，而是 inline 元素的 baseline 对齐机制在作怪。
关键点：
-
text-align: center只影响 inline 内容的**容器级水平位置**，不控制内部元素垂直对齐 - label 和 input 默认是 inline 或 inline-block，它们的基线（baseline）默认对齐，但 input 有默认 padding/border，label 没有，导致视觉错位
- 解决方式不是强行改 margin，而是统一盒模型基准：给 label 和 input 都设
vertical-align: top;或vertical-align: middle; - 更稳妥的做法是改用 flex：
display: flex; flex-direction: column; align-items: center;包裹每组<label><input></label>，再用margin-bottom控制间距
星号和 label 文字之间空隙太大或太小
直接写 姓名* 时，浏览器会把 * 当普通字符，但中文字体里它宽度不稳定；加空格又易被误读为“姓名 *”，语义出错。
处理原则：
- 不要用空格分隔，用 CSS 控制间距：
margin-left: 0.15em;（相对 em 单位，适配缩放） - 避免用
padding-left，会导致点击热区偏移 - 若需响应式微调，可用
@supports (font-variation-settings: normal)加 fallback，但绝大多数场景没必要 - 检查是否用了
letter-spacing全局重置，它会影响*间距，建议只对正文文本设
无障碍和语义上星号要不要暴露给屏幕阅读器
必须处理。单纯红色 * 对屏幕阅读器不可见，用户不知道这是必填项。
正确做法：
- 保留视觉星号，同时用
aria-required="true"标记 input - 或添加隐藏文本：
<span class="sr-only">（必填）</span>，配合.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); } - 不要用
title属性替代，它触发延迟且不被所有读屏器可靠支持 - 如果用
<label for="name">姓名<span aria-hidden="true">*</span></label>，记得同步设input[required]
vertical-align 在 inline 场景下的实际作用对象——它不是调“这个 span”，而是调“这个 span 相对于它所在行内流的基线位置”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
