jQuery垂直对齐两个div

Question

这是我想要实现的效果：

我有一个自适应宽度的工具提示和一个按钮，它们的宽度由文本和div填充决定。文本可能会变化。那么如何通过Jquery垂直对齐它们呢？

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

我尝试了width()函数，但它并不能给出确切的宽度。我想应该也要获取填充吧？

最后，我很不擅长数字...我不确定可以使用什么公式，但我怀疑是将两个div的宽度除以2，然后以某种方式使它们居中对齐?

编辑：单击按钮时，工具提示出现并且是绝对定位以不干扰/推动其他div。

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

- CyberJunkie

---

你的意思是将它们水平对齐吗？ - Valentin Flachsel

@user，当您点击推送div时，您会得到“感谢您推送”的呼叫，是这样吗？如果是的话，请让我知道，这应该很容易。 - kobe

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

重新使用CSS进行标记。@user：您能澄清一下您的问题吗？您是指水平对齐吗？您能发布一些代码吗？ - Sebastian Patane Masuelli

@user：我调整了你的代码，只是将 center_it 除以2，如下示例。 - Sebastian Patane Masuelli

Answer 1

获取 calloutdiv 的宽度：

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

将其除以固定的按钮宽度。

获取左侧：

left= widthCallout/pushbuttonwidth

您可以通过调整 paddingLeft 的值进行微调，使其向左或向右移动以达到居中的效果。

- kobe

---

按钮的宽度也是动态的，其文本也会变化。 - CyberJunkie

@user，由于此元素是绝对定位的，请将其更改为left属性。 - kobe

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

@user，已经有一些调用jquery插件可供使用，请尝试使用它们，它们会处理位置等问题。http://plugins.jquery.com/project/YACOP - kobe

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

@user，现在可以在左边尝试使用加号或减号……你应该没问题了。 - kobe

Answer 2

看这个例子：

var item = $(".tooltip");
var container = $("#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});

- Alex

Answer 3

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

你只需要将 center_it 除以2，就可以得到工具提示的中心点。

- Sebastian Patane Masuelli