jquery垂直对齐2个div

Posted 2023-03-05

【中文标题】jquery垂直对齐2个div

【英文标题】：jquery vertical align 2 divs

【发布时间】：2011-05-13 12:25:20

【问题描述】：

这就是我想要实现的目标

我有一个流畅的工具提示和一个按钮。它们的宽度由文本和 div 填充决定。文本可能会有所不同。那就是说如何通过 Jquery 垂直对齐它们？

我想使用jquery的原因是为了避免使用表格和过多的html。

我尝试了 width() 函数，但它没有给出确切的宽度。我想一个人也应该得到填充？

最后，我对数字很不满意。我不确定可以使用什么公式，但我怀疑可能将两个 div 宽度除以 2 并以某种方式居中居中？

编辑：点击按钮时，工具提示出现，绝对不会干扰/推动其他 div。

编辑：正在进行的工作 jsfiddle.net/Aezb6

【问题讨论】：

你的意思是水平对齐它们吗？

@user ，当您单击 push div 时，您会收到感谢您作为呼叫正确的提示，如果是这样，请告诉我这应该很容易

@gov 是的，您在单击按钮时会弹出工具提示我应该提到该工具提示是绝对的，因此它不会干扰其他 div。

@user ，我给了你一些解决方案，请尝试一下。

@user：我调整了 yr 代码，只是将 center_it 除以 2，请参见下面的示例。

【参考方案1】：

http://jsfiddle.net/SebastianPataneMasuelli/Aezb6/1/

您只需将center_it 除以 2 即可得到工具提示的中点。

【参考方案2】：

看这个例子：

var item = $(".tooltip"); var 容器 = $("#container"); var position = item.position(); var mytop = position.top - container.height() + $(document).scrollTop(); var myleft = position.left - container.width() + $(document).scrollLeft(); // 更正 IE 和 WebKIT 的相对坐标 if($.browser.msie || $.browser.webkit) mytop = position.top - container.height(); myleft = position.left - container.width(); container.offset(top: mytop, left: myleft);

【参考方案3】：

获取calloutdiv的宽度//

widthCallout=$('#calloutdivWidth'); // 这是动态的

除以按钮宽度不变。

离开：

left= widthCallout/pushbuttonwidth

您可以使用 paddingLeft 值 + 或 - 来确定中心：

【讨论】：

按钮的宽度也是动态的，它的文字会变化

@user ，因为这是绝对定位的，所以将其更改为左侧属性

@user 没问题，这就是为什么你应该动态获取宽度，但是你不能让宽度动态增长，你应该提供一些宽度，

@user ，已经有一些标注 jquery 插件可以尝试一下，它们会负责定位等。plugins.jquery.com/project/YACOP

大声笑我希望我早点知道，我想我会使用该插件。无论如何，这是我到目前为止所做的:) jsfiddle.net/Aezb6