代码之家 › 专栏 › 技术社区 › Jack Maessen

如何使用bootstrap 4将跨度垂直居中于按钮内

vertical-alignment twitter-bootstrap css html

Jack Maessen · 技术社区 · 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/

1 回复 | 直到 4 年前

Alexander Belokon 4 年前

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

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

或者更好的是,你可以简单地使用 Bootstrap 4类 在你的 button 标签以实现相同的结果:

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

推荐文章

William Entriken · 排列不同尺寸的徽章

7 年前

user438461 · 在我的WPF选项卡项中设置VerticalContentAlignment会更改选项卡中的文本和选项卡中包含的控件

8 年前

SmallSani · 当更改内容时,如何在页面上垂直居中放置div?

8 年前

Benji · -webkit背景剪辑:文本和垂直居中文本

8 年前

Travis Martin · flexbox布局中的垂直文本

8 年前

Mike Waldrup · 弹性物品被撞倒,正好是前一件物品的一半高度

8 年前

karlo1zg · 垂直对齐输入元素中间的浮动标签

8 年前

Ahmed Elashker · Xamarin在平台垂直选项上形成XAML

8 年前

coreysimons · 动态布局中的图像对齐

8 年前

Théo Clayette · 设置垂直Android工具栏

8 年前