如何垂直对齐POPUP div与DYNAMIC高度?

时间:2011-01-17 09:17:14

标签: javascript html css

哇,我没想到这会像旋风一样。 My page有多个div弹出窗口,其中填充了数据库生成的内容,因此每个div都具有动态高度。更简单的说,它需要位于页面的中间,内容需要始终位于中间位置,以便从中心向上和向下扩展。

为什么这么难:(?

2 个答案:

答案 0 :(得分:0)

保证金:自动,提到容器div的高度

答案 1 :(得分:0)

特别是如果您要求浏览器兼容性,那么在纯HTML / CSS中这或多或少是不可能的。在使用无关的table元素来包含我的内容时,我在浏览器中运气不错,因为表在技术上符合vertical-align CSS属性的条件。这需要获取实际上不是表格的内容(例如div s),并将其放置在小的1x1 table + td个组合中,其行为基本上与div s类似,除了它们正确对齐。对于好的浏览器,您可以通过提供div display:table-cell来避免这种情况,但对于糟糕的浏览器,它将无法工作。

你绝对可以在Javascript中实现这一点,Javascript很苛刻,但至少它是有效的。像这样的东西(提供Mootools代码):

window.addEvent('load', function() {
    var parentElement = $('parent_element_id');
    var childElement = $('child_element_id');

    var parentHeight = parentElement.getStyle('height');
    var childHeight = childElement.getStyle('height');

    parentElement.setStyles({
        'position' : 'relative'
    });

    childElement.setStyles({
        'position' : 'absolute',
        'top' : (parentHeight - childHeight) / 2
    });

});

(JS代码未经测试,但你得到的图片)