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.
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.
为容器div尝试以下样式:
<div style='display:table-cell; vertical-align:middle'></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.