CODEWITHSUNDEEP
htmlcss
user1251698
user1251698

Reputation: 2143

Aligning a div vertically

I want to align a left div vertically in middle of right div. I am able to do that by using display:table-cell; but then I cannot use the float:left

Here's what I'm trying:

HTML:

<div class="wrapper">
    <div class="left"><h1><a href="#"><img src ="img.png" /></a></h1></div>
    <div class="right">Right</div>
</div>

CSS:

.wrapper{
    overflow: hidden;
    border: 1px solid blue;    
    width: 400px;
}

.left{
    border: 1px solid red;   
    max-width: 200px; 
    max-height: 50px;
    float: left;   
    overflow: hidden;
    display:table-cell;
    vertical-align:middle;
}

img{
    display: block;
}

.right{
    width: 200px;
    height: 200px;
    float: right;
    border: 1px solid green;    
}

Demo: http://jsfiddle.net/fmpLt/

Upvotes: 1

Views: 99

Answers (3)

Sowmya
Sowmya

Reputation: 26989

Though I am not clear about what you are expecting, I have tried the below code. check if it can help you

Add display:table to .wrapper then table-cell to .left

DEMO

Another solution with position:absolute

.wrapper{
    overflow: hidden;
    border: 1px solid blue;    
    width: 400px;
   position:relative; background:yellow
}

.left{
    border: 1px solid red;   
    max-width: 200px; 
    max-height: 50px;
    overflow: hidden;   
    position:absolute;
    top:50%; margin-top:-25px
}

DEMO 2

Upvotes: 2

just.another.programmer
just.another.programmer

Reputation: 8815

You could use margin-top set to half the height of .right less half the height of the image. In this case, that would be margin-top: 68px.

Upvotes: 0

LittleSweetSeas
LittleSweetSeas

Reputation: 7084

If you know the left div height (eg.50px), you could set a position:relative to the wrapper container and the left div, then set a top position of 50% to the left div, with a margin-top equal to minus 50% of height.

Eg.

.wrapper{
    ...
    position:relative;
}

.left{
    ...
    position:relative;
    height:50px;
    top:50%;
    margin-top:-25px;
}

Upvotes: 1

Related Questions