表格内普通文本与右浮动按钮文本垂直对齐问题求助

嘿，这个问题我之前也踩过坑！根源在于pull-right类会给按钮加上float: right，而浮动元素会脱离正常的文档流，所以你给td设置的vertical-align: middle对它根本起不到作用。下面给你几个靠谱的解决办法，按推荐程度排序：

方案1：用Flexbox布局（最简洁推荐） #

直接把包含文本和按钮的<td>改成Flex容器，既能实现垂直居中，又能自动让按钮靠右，完全不用依赖浮动：

<tr>
  <td>element</td>
  <td class="flex-container">
    <span> test </span>
    <button class="btn btn-danger">Delete</button>
  </td>
</tr>

对应的CSS（可以写在你的样式文件里）：

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中所有子元素 */
  justify-content: space-between; /* 让文本靠左，按钮靠右 */
}

如果用的是Bootstrap 4+，直接用框架自带的工具类更方便，不用自己写CSS：

<tr>
  <td>element</td>
  <td class="d-flex align-items-center justify-content-between">
    <span> test </span>
    <button class="btn btn-danger">Delete</button>
  </td>
</tr>

方案2：保留浮动但修正对齐（兼容老项目） #

如果因为项目限制必须用pull-right，可以给两个元素都设置inline-block和vertical-align: middle，同时给父容器清除浮动：

<tr>
  <td>element</td>
  <td style="vertical-align: middle !important;">
    <span style="display: inline-block; vertical-align: middle;"> test </span>
    <span class="pull-right" style="display: inline-block; vertical-align: middle;">
      <button class="btn btn-danger">Delete</button>
    </span>
    <div style="clear: both;"></div>
  </td>
</tr>

原理是让两个元素都处于同一行的内联块级上下文，vertical-align: middle就能生效，最后的清除浮动div确保td能正确计算高度，避免布局塌陷。

方案3：用相对定位替代浮动 #

还可以给按钮设置相对定位，让它靠右，这样不会脱离文档流，vertical-align就能正常工作：

<tr>
  <td>element</td>
  <td style="position: relative; vertical-align: middle !important;">
    <span> test </span>
    <button class="btn btn-danger" style="position: absolute; right: 0; top: 50%; transform: translateY(-50%);">Delete</button>
  </td>
</tr>

这里用top: 50%加transform: translateY(-50%)实现按钮自身的垂直居中，适合一些特殊布局场景，但要注意td需要设置position: relative作为定位参考。

总的来说，Flexbox方案是最优解，代码简洁易维护，也是现代布局的标准做法，推荐优先使用。

内容的提问来源于stack exchange，提问作者coffee-and-code