表格单元格默认垂直对齐方式是middle；这是浏览器原生行为，非Bootstrap添加，但因内容行高、嵌套元素或插件干扰常导致视觉错觉。
表格单元格默认垂直对齐方式是什么
bootstrap 表格（<table>）中，<td> 和 <th> 默认使用 vertical-align: middle —— 这是浏览器原生行为，不是 bootstrap 特意加的。但很多人误以为“没对齐”，其实是内容本身（比如带行高的文本、图片、按钮）撑开了行高，导致视觉上偏上或偏下。
用 align-* 类直接控制单元格对齐
Bootstrap 5+ 内置了语义清晰的垂直对齐工具类，作用于 <td> 或 <th> 标签即可生效：
-
align-baseline：按父行基线对齐（适合混排文字和图标） -
align-top：顶部贴齐单元格上边框 -
align-middle：居中（默认值，显式写上更可控） -
align-bottom：底部贴齐单元格下边框
示例：
<td class="align-top">短文本</td><td class="align-bottom"><img src="icon.png" height="24"></td>
为什么加了 class 还不对齐？常见干扰项
对齐失效往往不是类没起作用，而是被其他样式覆盖或布局结构干扰：
- 父级
<tr>或<tbody>被设置了display: table-cell等非标准 display 值 - 单元格内嵌套了
<div>且该 div 有margin、padding或flex布局，把对齐基准拉偏了 - 用了
bootstrap-table插件却没关掉它的自动高度调整（它常给<tr>加height，会压制vertical-align） - 在响应式断点下，某些列被
col-*或d-none隐藏，导致剩余列宽度突变，间接影响视觉对齐感
需要整行统一垂直对齐时怎么处理
如果一整行的单元格都要顶部对齐，别一个个加 align-top，改用 <tr> 上的 Flex 工具类（Bootstrap 5+ 支持）：
<tr class="align-items-start"><td>A</td><td>B</td></tr>
注意：align-items-* 是 Flex 属性，只对 display: flex 或 display: inline-flex 生效；而原生表格的 <tr> 默认是 display: table-row，所以这个技巧**仅适用于你把 <tr> 显式改成 class="d-flex" 的场景**（比如用 Flex 模拟表格布局）。真表格里，老老实实给每个 <td> 加对齐类更稳妥。
最易被忽略的一点：垂直对齐是「单元格内部内容」相对于「单元格自身边界」的定位，不是相对于整张表或视口。调错目标，再多个 !important 也没用。
