Position Span Elements 50% from Top of Image

Question

I am creating a slideshow in JavaScript and would like to position the controls (the next and previous buttons) relative to the image so that it's 50% from the top of the image.

Here is my 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 -->

The spans that I'm positioning are inserted with JavaScript above the closing div for the slideshow.

The original plan was to position the buttons relative to the slideshow div. However, if the caption spans multiple lines, then the slideshow grows in height and the buttons move.

I would like the position of the buttons to be constant in relation to the height of the image. So instead of positioning the spans in relation to the entire slideshow div, which includes the captions, I want it to position itself in relation to the image, regardless of the height of the caption.

I cannot position with pixels because the slideshow must be responsive.

Here is my JS Fiddle:

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

One idea that I had was to change the HTML by wrapping the image and the spans in a div, like this:

<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>

And then have the JavaScript insert the spans inside the "img-contain" div and position it in relation to that div. The JavaScript would need to locate which image is currently being shown and add the spans in each time that the "next" or "previous" button is pushed.

Right now, it adds the buttons once on page load.

I thought that my new solution might be complicating things too much so I wanted to see if there was a better answer.

Answer 1

Here you go:

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

The trick is to add a padding-bottom to the next/previous spans to match the height (according to the aspect ratio) of the image. I used the p tags inside the tag for the button styles.