Question

I have a div that acts as a tooltip-like popup when the mouse hovers over a link. It conceptually has 5 rows: A line of text, a button, a divider, a line of text, a button.

 ----------------
|   Click here:  |
|    [Button1]   |
|   ----------   |
| Or Click Here: |
|    [Button2]   |
 -------  -------
        \/

Each row is currently a div with an image background for its content and it’s all working fine. But now we have a need to display combinations of the top and bottom button conditionally. How can I keep the visible elements vertically centered in the popup div as “rows” are shown or hidden? The popup div needs to have a minimum of 20px padding at the top.

 ----------------  ----------------
|                ||                |
| Or Click Here: ||   Click here:  |
|    [Button2]   ||    [Button1]   |
|                ||                |
|                ||                |
 -------  -------  -------  -------
        \/                \/

I’ve read this: http://www.boutell.com/newfaq/creating/centervertically.html but I’m not sure how to apply it with multiple stacked contents.

Answer 1

Since I’m already using javascript to show or hide the elements, I decided to use it to set the alignment as well. I first attempted to use javascript to intelligently recalculate the top margin to center the content for me. Because of IE’s disregard for standards, that got too messy. So I ended up using javascript to swap out css classes on the divs in order to adjust top & bottom margins and make it look centered instead. The divs are already stacking so if I remove the top div, the remaining ones shift up. So the class I swap in just adds the appropriate top margin to shift the top div down to the center.