使用rowspan时CSS文本对齐异常，求Bootstrap下的解决方案

我来帮你搞定这个文本对齐的困扰！你提到用table和div布局都没达到参考图的效果，核心问题是默认的对齐规则和Bootstrap的样式没有结合好，下面给你两种可行的解决方案：

方案一：优化Table布局（适配你的原始思路） #

默认情况下，table单元格的垂直对齐是middle，这会导致右边的两行文本都和左侧大数字的中间对齐，视觉上不符合预期。我们可以用Bootstrap的内置对齐工具类来调整：

<style>
h1{ font-size:45px; }
</style>
<table class="table-borderless"> <!-- 去掉默认表格边框，更清爽 -->
  <tr>
    <!-- 让左侧大数字垂直居中，去掉h1默认margin避免间距 -->
    <td rowspan="2" class="align-middle"><h1 class="mb-0">1</h1></td>
    <!-- 让标题文本靠上对齐 -->
    <td class="align-top fw-bold">Shopping Cart</td>
  </tr>
  <tr>
    <!-- 让小内容靠下，用small类缩小字号 -->
    <td class="align-bottom small text-muted">small content</td>
  </tr>
</table>

关键调整点：

• 给单元格添加align-middle、align-top、align-bottom类精准控制垂直对齐
• 用mb-0去掉h1的默认margin，避免数字周围多余间距
• 可选table-borderless去掉表格边框，更贴近现代UI风格

方案二：用Bootstrap Flex布局（更推荐的现代写法） #

Bootstrap更鼓励用Flex布局来实现这类横向排列的UI，比table更灵活且符合响应式设计：

<style>
h1{ font-size:45px; }
</style>
<div class="d-flex align-items-center">
  <!-- 数字区块，添加右侧间距 -->
  <div class="me-4">
    <h1 class="mb-0">1</h1>
  </div>
  <!-- 文本区块，垂直排列 -->
  <div class="d-flex flex-column">
    <span class="fw-bold">Shopping Cart</span>
    <span class="small text-muted">small content</span>
  </div>
</div>

关键优势：

• d-flex创建弹性容器，align-items-center让左右区块整体垂直居中
• flex-column让右侧文本上下堆叠
• 用me-4控制数字和文本的间距，fw-bold和text-muted优化文本样式，更贴近常见UI设计

这两种方案都能让文本和数字按照参考图的样式正确对齐，你可以根据自己的布局习惯选择~

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