Laravel 和 Bootstrap 4 中按钮文本未正确居中

Question

我的 laravel 应用程序中有一个按钮<a href="{{ url('/product') }}" class="btn btn-default px-5 mt-3 rounded subscribe" role="button">{{ __('More info') }}</a>所以我需要按钮文本位于按钮的中心。但目前文本并未正确居中于按钮目前按钮看起来像这样。文本没有很好地居中。在我的 css 中，我有以下类代码，订阅.subscribe {            background-color: #5ABDBA;            color: #fff;            border-radius: 40px!important;            height: 43px;            text-transform: capitalize!important;            vertical-align: middle;        }我正在使用 bootstrap 4 。

Answer 1

为什么要强制按钮高度？

并始终青睐框架现有类

.subscribe { background-color: #5abdba; }

<a href="/" class="btn btn-default px-5 mt-3 rounded-pill text-white text-capitalize subscribe"  role="button">{{ __('More info') }}</a>

Answer 2

如果你想在 css 中保持高度，那么在标签集的类d-flex中align-items-center