Question

当鼠标悬停在链接上时，我有一个div作为类似工具提示的弹出窗口。它在概念上有5行：一行文本，一个按钮，一个分隔符，一行文本，一个按钮。

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

每一行当前都是一个div，其内容具有图像背景，并且一切正常。但现在我们需要有条件地显示顶部和底部按钮的组合。当显示或隐藏“行”时，如何将可见元素垂直居中在弹出窗口中？弹出div需要在顶部至少有20px的填充。

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

我读过这个：http://www.boutell.com/newfaq/creating/centervertically.html但我不确定如何将其应用于多个堆叠内容。

Answer 1

为容器div尝试此样式：

<div style='display:table-cell; vertical-align:middle'></div>

Answer 2

由于我已经使用javascript来显示或隐藏元素，所以我决定使用它来设置对齐方式。我首先尝试使用javascript智能地重新计算上边距，以便为我设置内容。因为IE无视标准，所以太乱了。所以我最终使用javascript来交换div上的css类，以便调整top＆amp;底边距并使其看起来居中。 div已经堆叠，所以如果我删除顶部div，剩下的就会向上移动。因此，我交换的类只添加了适当的上边距，将顶部div向下移动到中心。

垂直对齐堆叠内容

2 个答案: