使用jQuery基于其他元素动态定位元素

Question

我想使用jQuery动态设置包含h3的div的顶部位置。链接是我想要完成的图像。

在那张图片中，顶部：在标题div（绿色h3s）上是绝对定位的，硬编码顶部为590.如果锦标赛大小永远不会改变（8,4,2,1），这种情况很有效 - 但有些锦标赛只有两轮（3场比赛），其中的冠军明显落在了页面上。

在括号中，我在每个中途点添加了round-title-before和round-title-classes，因此我可以看到/表明它们之间有标题显示。

有没有办法用.position（）或.height（）计算.round-title-before和.round-title-after之间的差异，以正确定位#title div，使其始终居中或接近中心无论有多少或几乎没有比赛？第二张图片作为小型锦标赛的例子。

大型锦标赛：

========================

小型锦标赛：

Answer 1

在我看来，你应该使用jqueryui的位置功能并将每个支架放在一个容器中。容器的高度等于总高度，您可以使用前面提到的jqueryui位置功能相对于容器垂直居中（我假设在x轴的右侧）。