如何使用Bootstrap 4在按钮内部垂直跨距

问题描述

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

<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/

解决方法

您可以使用 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>