Question

如何将一个可变宽度div水平居中于另一个div中，该div具有从顶部开始的特定偏移（或垂直居中）？一个额外的条件是只有div的可见部分必须拦截鼠标事件 - 这限制了一些选项。

+--------------+
|  outer div   +
|   <innner>   +
+--------------+

inner包含可点击元素，且必须位于堆叠顺序的顶部。 outer div也是可点击的，因此inner周围的区域必须将鼠标事件传递给基础div。 inner是一个可变宽度。 inner必须与outer的顶部有一些偏移。

我知道有很多相关的中心问题，但这里的鼠标事件方面会有所不同。

Answer 1

假设你有一个外部div与类外部，并在其中有另一个div具有class =“inner”。中心可以通过css实现：

.outer {
    height: 100px;
    width: 200px;
    line-height: 100px;
    border: 1px solid red;
    text-align: center;
}

.inner {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border: 1px solid blue;
}

我将click事件添加到外部div，以及内部div中的按钮。默认情况下，按钮单击将传播到外部div。

演示：http://jsfiddle.net/er144/bh3V9/

div中的水平中心变宽div，旁边的鼠标事件必须通过？

1 个答案: