CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvertical-alignment
Adrian.I
Adrian.I

Reputation: 180

Vertical align a label inside btn-group using Bootstrap

I have 2 inline elements inside a horizontal form and I can't vertical align the labels . Is there a clean way to do it without using hacks like display:table ?

Here is the code i tried so far: bootply

Upvotes: 2

Views: 367

Answers (2)

cup_of
cup_of

Reputation: 6697

add line-height css to the label and match it with the height of the button

new css:

.btn-group label{
   line-height: 35px;
}

since the .btn-group is 35px high, you make line height 35px as well.

Upvotes: 4

M.Tanzil
M.Tanzil

Reputation: 2005

Use the new CSS3 Flexbox display property.

It's easy and works perfect in every scenario. 

.btn-group{
   ....
   display:inline-flex;
   justify-content:center;
}

.btn-group label{
   ....
   align-self:center;
   margin-bottom:0px;
}

Upvotes: 1

Related Questions