CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Novice
Novice

Reputation: 401

how can i vertically align an element with twitter bootstrap?

i know that this question has been asked many time but none of the solution is working for me. i simply want to align one label inside one div that is associated with a twitter-bootstrap class. but it is not being aligned. I have tried horizontal alignment with this and it was working fine. without bootstrap it was working fine but with bootstrap it stopped working. any idea how it will work ?

Upvotes: 1

Views: 112

Answers (4)

sangram parmar
sangram parmar

Reputation: 8736

try this

http://jsfiddle.net/s7Wb4/9/

.center{
width : 100px;
height : 100px;
display : table-cell;
float:none !important;
vertical-align : middle;
border : 1px solid red;
}

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85578

Address the label instead

.center{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: table;
}
.center label {
    display: table-cell; 
    vertical-align: middle;
}

forked jsFiddle http://jsfiddle.net/s5dJH/

Upvotes: 1

koningdavid
koningdavid

Reputation: 8095

Here you go

with the use of

display:table;

and

display:table-cell;
vertical-align:middle;

This way the label will always be centered, even if you resize the box

http://jsfiddle.net/s7Wb4/2/

Upvotes: 0

otinanai
otinanai

Reputation: 4023

You can use line-height to your label and set it the same height as your div. This will align it perfectly.

See this demo.

Upvotes: 0

Related Questions