Positioning the left-right arrow buttons for a carousel
Is it not possible to wrap both the 'arrow' and the image inside a relative div then do some absolute position and stuff?

jsfiddle so you can change the height to see it change without javascript: https://jsfiddle.net/3bm2hp5f/1/

Code:



html, body {
  height: 100%;
  width: 100%
}
&lt;div id="resizable" style="width: 30%; height: 50%; resize: both; position: relative; display:inline-block; border: 3px solid black"&gt;
  &lt;div style="position: absolute; top: 50%; transform: translateY(-50%);"&gt;
    &amp;lt;
  &lt;/div&gt;
  &lt;image style="width: 100%; height: 100%;"&gt;&lt;/image&gt;
&lt;/div&gt;
&lt;div style="display: inline-block"&gt;
 something else
&lt;/div&gt;