在排行榜类页面开发中，使用Bootstrap卡片承载排行数据是非常常见的场景，其中姓名靠左、对应数值靠右且两者垂直居中的布局需求出现频率很高，很多开发者尝试用浮动、文本对齐等方式实现，往往会出现对齐偏差或者响应式适配问题。
核心实现思路
要实现姓名左对齐、数值右对齐且两者垂直居中，核心是利用Bootstrap的flex布局相关类，因为flex布局可以很方便地控制子元素的对齐方式和排列方向，比传统的浮动布局更稳定，也更容易适配不同屏幕尺寸。
用到的Bootstrap核心类
d-flex：将元素设置为flex容器justify-content-between：让flex子元素两端对齐，一个靠左一个靠右align-items-center：让flex子元素在交叉轴（垂直方向）居中对齐
完整实现代码示例
下面是一个完整的Bootstrap卡片排行榜单条数据的实现代码，包含了卡片容器、排行序号、用户姓名、对应数值四个部分，数值部分实现了右对齐且和姓名垂直居中：
<div class="card mb-3">
<div class="card-body d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<span class="badge bg-primary me-3">1</span>
<span class="fw-bold">张三</span>
</div>
<span class="text-danger fw-bold">98分</span>
</div>
</div>
代码逻辑解析
外层card-body添加了d-flex justify-content-between align-items-center三个类，首先把卡片内容区域变成flex容器，然后让内部的姓名区域和数值区域两端对齐，同时两个区域在垂直方向居中。姓名区域内部又嵌套了一个d-flex align-items-center，是为了让排行序号和姓名本身也垂直居中，避免序号和姓名高度不一致导致的对齐问题。
常见问题排查
如果实现后还是没有垂直居中，可以检查以下几点：
- 确认是否给flex容器添加了
align-items-center类，这是垂直居中的核心类 - 检查子元素是否有自定义的高度或者行高设置，可能会覆盖flex的对齐效果
- 如果数值部分有多行内容，可以给数值容器也添加
text-end类，保证多行内容都右对齐
多条目排行榜完整示例
下面是一个包含三条数据的完整排行榜卡片示例，可以直接复制到项目中使用：
<div class="card">
<div class="card-header fw-bold">月度积分排行榜</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<span class="badge bg-warning me-3">1</span>
<span>李四</span>
</div>
<span class="text-success">120分</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<span class="badge bg-secondary me-3">2</span>
<span>王五</span>
</div>
<span class="text-success">115分</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<span class="badge bg-secondary me-3">3</span>
<span>赵六</span>
</div>
<span class="text-success">110分</span>
</li>
</ul>
</div>
这个示例使用了Bootstrap的列表组来承载多条排行数据，每条数据的对齐逻辑和单卡片示例一致，响应式适配效果也更好，在移动端会自动调整内边距，保证对齐效果不失效。