将跨度元素从图像顶部定位 50%

Question

我正在用 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 定位按钮。但是，如果标题跨越多行，则幻灯片的高度会增加并且按钮会移动。

我希望按钮的位置相对于图像的高度保持不变。因此，我希望它相对于图像定位自身，而不考虑标题的高度。

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

这是我的 JS 小提琴：

https://jsfiddle.net/amykirst/vtsru170/

我的一个想法是通过将图像和跨度包装在 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 中插入 span，并将其相对于该 div 定位。 JavaScript 需要定位当前正在显示的图像，并在每次按下“下一个”或“上一个”按钮时添加跨度。

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

我认为我的新解决方案可能过于复杂，所以我想看看是否有更好的答案。

Answer 1

给你：

https://jsfiddle.net/vtsru170/4/

诀窍是将padding-bottom 添加到下一个/上一个跨度以匹配图像的高度（根据纵横比）。我使用标签内的 p 标签作为按钮样式。