Bootstrap 5中<li>内文本无法垂直居中的问题求助

你的问题出在左侧包含图标和文本的<div>未设置为Flex容器，导致内部图标与文本无法垂直对齐。尽管<li>已添加d-flex align-items-center，但该类仅作用于<li>的直接子元素（左侧div和右侧徽章），对div内部元素无效。

修复方案 #

给左侧的空div添加d-flex align-items-center类，让其内部图标和文本实现垂直居中：

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <i class="bi bi-circle me-2 text-muted" style="font-size: 1.5rem;"></i>
            <label class="form-check-label">
                <a target="_blank" class="text-success" href="https://www.facebook.com/">Follow on Facebook</a>
            </label>
        </div>
        <span class="badge bg-primary rounded-pill">+2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <i class="bi bi-circle me-2 text-muted" style="font-size: 1.5rem;"></i>
            <label class="form-check-label">
                <a target="_blank" class="text-success" href="https://www.instagram.com/">Follow on Instagram</a>
            </label>
        </div>
        <span class="badge bg-primary rounded-pill">+5</span>
    </li>
</ul>

原理说明 #

• d-flex将左侧div转为Flex容器，align-items-center让容器内所有子元素（图标和文本标签）在垂直方向上居中对齐。
• 之前单独给元素添加align-middle无效，是因为该类依赖父元素为inline/inline-block或Flex容器，而你的左侧div默认是块级元素，不支持该类的垂直对齐效果。

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