Question

I have a slideshow. I also have a previous and next button.
The slideshow re-sizes according to the screen size it is displayed on.
I need the previous and next button to always be in the center of the slide show.
If I add position: absolute; it does not look right on bigger screens.

html:

<div class="slideshow" style="position: relative;">
    </div>
    <div id="prev"></div>
    <div id="next"></div>

css:

#prev, #next
{
    position: absolute;
    z-index: 20;
    width: 41px;
    height: 80px;
    cursor: pointer;
    top: 300px;
}

#prev
{
    left: 0;
    background-image: url("img/prev.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

#next
{
    right: 0;
    background-image: url("img/next.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

Answer 1

<div id="prev"></div>
<div id="next"></div>

These should be inside

<div class="slideshow" style="position: relative;">
</div>

and then inside css

#prev, #next{position:absolute;top:50%}

I hope it will fix your issue