如何让表格单元格内右侧浮动文本与左侧文本保持垂直居中对齐？

直接用Flex布局就能完美解决这个问题，既不用依赖浮动破坏文档流，也能轻松实现左右文本的垂直居中，代码简洁且无副作用。

实现代码 #

HTML结构

<table>
  <tr>
    <td>
      <ul class="custom-list">
        <li>
          <span class="main-content">主内容文本</span>
          <span class="small-content">右侧小字号说明</span>
        </li>
        <li>
          <span class="main-content">较长的主内容，测试换行场景</span>
          <span class="small-content">右侧小字</span>
        </li>
      </ul>
    </td>
  </tr>
</table>

CSS样式

.custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-list li {
  display: flex;
  justify-content: space-between; /* 左右元素两端对齐 */
  align-items: center; /* 核心：垂直居中对齐 */
  margin-bottom: 10px; /* 可选：控制li之间的间距 */
}

.small-content {
  font-size: 0.8em; /* 设置小字号 */
  margin-left: 15px; /* 可选：和主文本保持间距，避免拥挤 */
}

为什么这个方案可行？ #

Flex布局是专门为这类对齐场景设计的：

• align-items: center 会让flex容器内的所有元素自动垂直居中，完全不受字号差异影响；
• justify-content: space-between 直接实现左、右文本的两端对齐，无需手动调整定位；
• 不会破坏文档流，主文本换行时，右侧小字依然能保持和主文本的垂直居中对齐。

兼容旧浏览器方案（如IE9及以下） #

如果需要兼容不支持Flex的旧浏览器，可以用表格单元格布局模拟：

.custom-list li {
  display: table;
  width: 100%;
}

.main-content, .small-content {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

.small-content {
  font-size: 0.8em;
  text-align: right;
  width: 1%; /* 让右侧单元格宽度自适应内容 */
  white-space: nowrap; /* 避免小字换行 */
  padding-left: 15px;
}

这个方法通过模拟表格的单元格对齐逻辑，同样能实现垂直居中，且兼容性更好。

内容的提问来源于stack exchange，提问作者spraff