Question

I have a few nested divs and i need to vertically center one of the nested divs. Normally i’d do this by giving the outer div the css property position: relative and the inner div the property position: absolute. I can then easily use top and left to position the div.

But i can’t get it done with my current structure. Here’s an example:

http://jsfiddle.net/Epmd4/2/

So basically from that example, the div with the blue border should be vertically centered inside the green div. But i can’t get it done.

Anyone any idea how to do this?

PS. I can only add css properties to the .item div and everything inside it.

Answer 1

Try this:

.item {
    /*position: relative;*/
    background: #00FF66;
    min-height: 60px;
    display:table-cell;
    vertical-align:middle;
}

jsFiddle example

For this to work in IE7, a JavaScript hack is necessary:

$(document).ready(function(){
  if($.browser.msie && $.browser.version == 7) {
      $(".tablecell").wrap("<td />");
      $(".tablerow").wrap("<tr />");
      $(".table").wrapInner("<table />");
  }
});

Just replace the .table* classes with the appropriate ones.