垂直对齐div内容，在mouseover上替换tr元素（使用jQuery）

Question

I'm working on a html table where I show more information on a row using jQuery.

The following is an example of how I'm doing it: http://jsfiddle.net/rMXAp/7/

The jQuery essentially fades the row in question, by setting the opacity to 0, and adds an overlay containing the following div:

<div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div> 

The jQuery then sets the div text based on the "desc" attribute of the tr/row.

The problem I'm having lies in vertical alignment of the text shown (in a div) in place of the table row, when hovering over it.

Things I've tried.

• "vertical-align:middle;" for the tr element, as well as the div.
• "min-height: 10em;" for the div.
• "position: absolute; top: 50%;" for the div.

I cannot set the div's "display" property to anything other than none, or else it would display below the table (see jsfiddle).

I'm aware there are many questions on vertical alignment, but given I'm showing a div using jQuery, and setting the html dynamically, would they be used the same way? Or how?

I've got the feeling I've completely missed something here...

Answer 1

Ahh.. verical aligning... I think the best method is using the table-cell display.

The problem is that for display:table-cell; to work properly, the parent must have display:table ;

So I'd suggest something like this:

HTML

<div id="divOverlay">
   <div class="content" style="display:table-cell;vertical-align:middle;">
   </div> <!-- the content div will hold the content -->
</div> 

Javascript:

// inside onmouseover...
$divOverlay.css({
        position: 'absolute',
        display: 'table', //set parent's display to table
        ....
    }); 
    //set the html to the child content holder
    $divOverlay.find(".content").html($(this).closest('tr').attr('desc')); 

check out this jFiddle: http://jsfiddle.net/SpacePineapple/4T42H/

Answer 2

I guess you don't have any problem by keeping content of "desc" data into a span.

Have took a span having line-height:normal and vertical-align:middle and added the line-height for div.

Edited your fiddle here

Please let me know if you want something else.

EDIT

If you don't want to change the content of "desc" then you can implement like this too.

$divOverlay.html("<span style='vertical-align:middle;display:inline-block;line-height:normal'>"+$(this).closest('tr').attr('desc')+"</span>");