Bootstrap Card文本对齐问题：无法实现数字右对齐及垂直居中

修改后的代码 #

<div class="card" style="width: 350px; float: right; margin-right: 100px;">
    <ul class="list-unstyled card-body mb-0 pb-0">
        <li class="media mb-3">
            <div class="media-body">
                <!-- 用Bootstrap flex类实现左右分布+垂直居中 -->
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <strong style="font-size: 20px;">Jordan</strong>
                    <p style="font-size: 20px; font-weight: 650; margin: 0;">12</p>
                </div>
                <div class="progress" style="height: 10px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" 
                         role="progressbar" 
                         style="width: 50%; background-color: green" 
                         aria-valuenow="15" 
                         aria-valuemin="0" 
                         aria-valuemax="100">
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

关键修复点 #

• 替换原display: inline-block容器为d-flex justify-content-between align-items-center：
  • d-flex启用Flex布局，让子元素支持灵活对齐
  • justify-content-between实现名称左对齐、数字右对齐的两端分布
  • align-items-center确保数字与名称垂直居中对齐
• 移除float-right pull-right和padding-left:200px的硬编码：float元素会脱离文档流导致垂直居中失效；固定padding无法适配不同容器宽度
• 给数字的p标签添加margin:0，消除默认边距避免布局偏移

原方法失效原因 #

1. 外层inline-block容器无法感知内部float元素的高度，导致垂直居中样式无法生效
2. pull-right是Bootstrap3类，Bootstrap4+已废弃；float本身不参与Flex对齐逻辑，无法配合垂直居中
3. 固定padding-left属于硬编码，无法自适应容器宽度，易引发布局混乱

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