Button text not properly centered in laravel and bootstrap 4

Question

I have a button in my laravel application

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

So I need the button text to be centered in the button. But currently the text is not properly centered to the button

Currently the button look like this. The text is not well centered.

In my css I have following code for the class, subscribe

.subscribe {
            background-color: #5ABDBA;
            color: #fff;
            border-radius: 40px!important;
            height: 43px;
            text-transform: capitalize!important;
            vertical-align: middle;
        }

And I'm using bootstrap 4 .

Does this answer your question? [Vertical alignment of text and icon in button](https://stackoverflow.com/questions/17478710/vertical-alignment-of-text-and-icon-in-button) — Nisharg Shah, Apr 21 '20 at 12:39

score 1 · Accepted Answer · answered Apr 21 '20 at 11:35

Why force the button height ?

And always favor framework existing classes

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

score 0 · Answer 2 · answered Apr 21 '20 at 10:28

0

If you want to keep height in css then in class of a tag set d-flex and align-items-center

answered Apr 21 '20 at 10:28

knubbe

1,132
2
12
21

Button text not properly centered in laravel and bootstrap 4

2 Answers2