div内水平居中变宽div，旁边的鼠标事件一定要通过？

Posted 2023-02-24

【中文标题】div内水平居中变宽div，旁边的鼠标事件一定要通过？

【英文标题】：Horizontal center variable width div within div, mouse events beside must pass through?

【发布时间】：2014-01-08 06:29:04

【问题描述】：

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

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

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

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

【问题讨论】：

刚刚在这里回复***.com/a/20988457/1542290

@Mr.Alien 不能解决鼠标问题。该表阻止所有鼠标事件到达底层元素。

你能给我们看一些代码吗？

【参考方案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;

我将点击事件添加到外部 div 和内部 div 内的按钮。默认情况下，按钮点击会传播到外层 div。

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