CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
flxkrmr
flxkrmr

Reputation: 72

Vertically align text in bootstrap styled labels and links

I tried using bootstrap button styled labels and links with a bigger a hight than default und the text is vertically aligned at the upper side of the button. If I do the same with an actual button element, it is centered vertically.

How do I center the text vertically?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<label class="btn btn-primary" style="height: 80px; margin-bottom: 0">Label Button</label>
<a href="#" class="btn btn-primary" style="height: 80px; margin-bottom: 0">Link Button</a>
<button class="btn btn-primary" style="height: 80px">Actual Button</button>

Upvotes: 2

Views: 617

Answers (2)

Vicky Maharjan
Vicky Maharjan

Reputation: 316

Set :

vertical-align:middle;
line-height:80px; //height of your parent element


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<label class="btn btn-primary" style="vertical-align:middle;line-height:80px;">Label Button</label>
<a href="#" class="btn btn-primary" style="vertical-align:middle;line-height:80px;">Link Button</a>
<button class="btn btn-primary" style="vertical-align:middle;line-height:80px;">Actual Button</button>

Upvotes: -1

Elydasian
Elydasian

Reputation: 2066

Just add this line to the class of the button:

line-height: 60px;

Or you can do this:

display: inline-flex;
align-items: center;

As in the snippet bellow.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<label class="btn btn-primary" style=" display: inline-flex;
  align-items: center;
     height: 80px; margin-bottom: 0">Label Button</label>
<a href="#" class="btn btn-primary" style="line-height: 60px; height: 80px; margin-bottom: 0">Link Button</a>
<button class="btn btn-primary" style="height: 80px">Actual Button</button>

Upvotes: 2

Related Questions