align-middle类必须加在或上而非上，因其本质是vertical-align: middle，而该css属性仅对单元格元素生效；加在上无效。
align-middle 类必须加在 <td> 或 <code><th> 上，加在 <code><tr> 上完全无效——这是最常踩的坑。
<h3>为什么 <code>align-middle 加了没反应？
根本原因不是类写错了，而是作用对象错了。浏览器原生的 vertical-align 只对表格单元格元素（<td>、<code><th>）生效，对 <code><tr> 无效。很多开发者习惯给整行加类：
<pre class="brush:php;toolbar:false;"><tr class="align-middle">
<td>A</td>
<td>B</td>
</tr></pre>
<p>这不会让内容居中。正确写法是逐个加到单元格上：</p>
<pre class="brush:php;toolbar:false;"><td class="align-middle">A</td><td class="align-middle">B</td></pre>
<ul>
<li>
<code>align-middle 本质是 vertical-align: middle !important，能覆盖多数干扰样式
bootstrap-table 插件，它常偷偷给 <tr> 加 <code>height，会压制 vertical-align 计算，此时需禁用插件的高度控制或改用 data-height 配置
图片、按钮和文字混排时对齐失效怎么办？
文字居中了，但同一单元格里的 <img> 或 <button></button> 还悬在顶部？这是因为 vertical-align 对「块级子元素」不敏感——只要某个子元素设了 display: block（比如未加 align-middle 的图片），整行基线就会偏移。
- 给图片也加
class="align-middle"，和文字单元格同理 - 避免在
<td> 内部用 <code>display: flex或display: grid：此时align-middle失效，应改用d-flex align-items-center - 检查是否有父级
<div> 包裹了单元格内容且设置了 <code>margin、padding或line-height，这些都会拉偏视觉基准整行统一顶部/底部对齐，能不能不一个个加类？
可以，但仅限你主动把
<tr> 改成 Flex 容器的场景。原生表格的 <code><tr> 是 <code>display: table-row，不识别align-items-*类。- 若用 Flex 模拟表格布局（如
<div class="d-flex"> 替代 <code><tr>），可直接在容器上加 <code>align-items-start或align-items-end - 真表格里，老老实实给每个需要对齐的
<td> 加类更稳妥，兼容性无风险 <li>注意：<code>align-baseline适合图文混排，能让图标和文字按基线对齐，比align-middle更自然 - 强制启用固定布局：
.table { table-layout: fixed; }，防止浏览器按内容重算列宽 - 监听窗口缩放：
$(window).on('resize', () => $('#myTable').bootstrapTable('resetView')) - 避免在
<th> 和 <code><td> 中混用不同高度的内联元素（如一个含 <code>h-100的按钮，另一个纯文本），会导致行高不一致最容易被忽略的是：垂直对齐永远是「内容相对于单元格自身边界」的定位，不是相对于整张表。调错目标容器，再多个
!important也没用。
表格内容和表头不对齐（尤其固定表头时）
常见于
bootstrap-table或自定义固定表头方案：滚动后列宽错位、文字上下偏移。这不是对齐类的问题，而是表格渲染机制被破坏。 - 若用 Flex 模拟表格布局（如
