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"&nbsp; role="button">{{ __('More info') }}</a>

Answer 2

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