Javascript 将跨度元素放置在距离图像顶部50%的位置

我正在用JavaScript创建一个幻灯片，并希望将控件（下一个和上一个按钮）相对于图像进行定位，使其距离图像顶部50%

这是我的HTML：

<div id="slideshow">
            <figure>
                <img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
                <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
            </figure>
            <figure>
                <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
                <figcaption>Insert caption</figcaption>
            </figure>
            <figure>
                <img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg" />
                <figcaption>Insert caption</figcaption>
            </figure>

        </div><!-- end slideshow -->

这是一个很长的标题示例。我来了。我要换第二行吗？包起来。包裹
插入标题
插入标题

我所定位的跨距用JavaScript插入幻灯片的结束div上方

最初的计划是相对于幻灯片div定位按钮。但是，如果标题跨越多行，则幻灯片高度会增加，按钮也会移动

我希望按钮的位置相对于图像的高度是恒定的。因此，我不想让跨距相对于整个幻灯片div（包括标题）进行定位，而是希望跨距相对于图像进行定位，而不管标题的高度如何

我不能用像素定位，因为幻灯片必须是有响应的

这是我的JS小提琴：

我的一个想法是通过将图像和跨距包装在一个div中来更改HTML，如下所示：

<figure>
                <div class="img-contain">
                <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
                </div>
                <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
            </figure>

这是一个很长的标题示例。我来了。我要换第二行吗？包起来。包裹

然后让JavaScript在“img contain”div中插入跨距，并将其相对于该div定位。JavaScript需要定位当前显示的图像，并在每次按下“next”或“previous”按钮时添加跨距

现在，它在页面加载时添加一次按钮

我认为我的新解决方案可能会使事情变得太复杂，所以我想看看是否有更好的答案。

给你：

---

诀窍是在下一个/上一个跨距中添加

填充底部

，以匹配图像的高度（根据纵横比）。我将标签中的p标签用于按钮样式。

如果我不知道注释的高度，该怎么办？在我的示例中，第一个幻灯片跨越多行，但我不知道在实践中是否会有更多或更少的行。也许我应该使用JavaScript检查最高幻灯片的高度，然后使其他幻灯片匹配？在这种情况下，行数并不重要。你注意到（在小提琴中）我为第一张幻灯片添加了许多行文字吗？谢谢。昨晚我在手机上看到堆栈溢出，看不到小提琴。两个问题。（1） 跨度的底部填充基于什么？如何计算？我原以为它会基于父元素（幻灯片）的高度，但事实并非如此。（2） 如果我希望控件位于图像的中心，但不知道图像的高度，该怎么办？在你的小提琴中，你使用的百分比，但如果图片高度改变，那么75%的百分比将不再在中间。1，刚才看到填充底部基于父元素的宽度。