CODEWITHSUNDEEP
htmlcss
user1355300
user1355300

Reputation: 4987

CSS: Setting vertically in middle

Consider following:

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>

Left div has less height than the right div. Can I set the left div vertically in the middle of the right div? I can not set the margin-top because the height varies.

enter image description here

Here's the jsfiddle link: http://jsfiddle.net/k8972/

Upvotes: 4

Views: 92

Answers (3)

SpaceBeers
SpaceBeers

Reputation: 13957

You can use display: table-cell and vertical-align: middle; but it won't work on IE7 or less.

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

Hi now used to display inline-block and give to vertical-align and remove to float

as like this 

.wrap{
    overflow:hidden;
    border:1px solid red;
    width:250px;
    display:table;
}


.left{
    width:100px;
    height:50px;
    background:yellow;
    display:inline-block;
    vertical-align:middle;
}

.right{
    width:100px;
    height:100px;
    background:brown;
    display:inline-block;
    vertical-align:middle;
}

live demo http://jsfiddle.net/k8972/2/

Upvotes: 4

PraveenVenu
PraveenVenu

Reputation: 8337

Couple of methods mentioned here

http://phrogz.net/css/vertical-align/index.html

Upvotes: 0

Related Questions