使用ngb-rating时Bootstrap Flex布局失效，无法居中对齐元素

问题分析 #

你的代码存在两个核心问题导致样式不符合预期：

• 外层d-flex容器未添加align-items-center，左侧h3与右侧评分模块无法实现垂直居中对齐
• 评分模块内部使用justify-content-between会让数字与星星两端分散，不符合紧凑排列的需求；同时ngb-rating组件默认的行高样式可能干扰垂直对齐效果

修正后的代码 #

<div class="d-flex justify-content-between align-items-center">
  <h3>Team Lead</h3>
  <div class="rating-number d-flex align-items-center gap-2">
    <p class="mb-0">4.5</p>
    <ngb-rating class="black-star" [(rate)]="this.star" [readonly]="true" max="1"></ngb-rating>
  </div>
</div>

关键调整说明 #

• 外层容器添加align-items-center：让左右子元素（h3和评分模块）在垂直方向居中对齐
• 评分模块替换justify-content-between为gap-2：用Bootstrap间距类控制数字与星星的间距，保持紧凑排列
• 给p标签加mb-0：移除段落默认底部外边距，避免垂直方向出现多余空隙
• 保留align-items-center：确保数字与星星在垂直方向完全对齐

补充样式优化（可选） #

如果星星仍存在细微对齐偏差，可重置组件行高：

.black-star {
  color: #000000;
  line-height: 1; /* 消除默认行高带来的垂直间距 */
}

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