如何使用引导程序 4 在按钮内垂直居中跨度 [重复]

【问题标题】：how to center a span vertical inside a button with bootstrap 4 [duplicate]如何使用引导程序 4 在按钮内垂直居中跨度 [重复]
【发布时间】：2021-02-18 06:38:17
【问题描述】：

我有一个小圆圈，按钮内有一个数字。如何在按钮内将跨度垂直居中？

<button class="btn btn-primary w-50 my-4">
    Comments Moderation <span class="approve-counter rounded-circle bg-danger text-white text-center float-right">5</span>
</button>

CSS：

.approve-counter {
    width: 20px;
    height: 20px;
    line-height: 20px;
}

如你所见，蓝色按钮中间的红色圆圈并不完全垂直

小提琴：https://jsfiddle.net/vour83s9/

【问题讨论】：

标签： html css twitter-bootstrap vertical-alignment

【解决方案1】：

您可以使用 flex 和 align-items: center 将按钮中的所有项目垂直居中。将以下样式应用于您的按钮元素：

.btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

或者更好的是，您可以简单地在 button 标记中使用 Bootstrap 4 类 来获得相同的结果：

<button class="d-flex align-items-center justify-content-between btn btn-primary w-50 my-4">
    Comments Moderation <span class="approve-counter rounded-circle bg-danger text-white text-center float-right">5</span>
</button>

【讨论】：