Positioning arrows and floating image gallery to centre

[Edrol97]

Hi all,

Wondering how to position the arrows of gallery in image below. I want them to be just over the vertical center of the image either side sort of hugging the focal point of the image. I also want the entire div to be centered. I attach both html and css code. CSS code is showing what I've tried that fails. Also an image of how it looks currently.

UPDATE: Solved centering of div with the following:

#imageslidercontainer {
  position: relative;
  top: 50%;
  margin-left: 25%;
}

<div id="imageslidercontainer">
  <link rel="stylesheet" href="slider.css">
  <div class="imageslider">
    <div class="imageslider_images">
    <img class="imgsli" src="img/MorningStarCover.png">
    <img class="imgsli" src="img/MorningStarFullPage.png">
    <img class="imgsli" src="img/MorningStarFnF.png">
  </div>
  <div class="imageslider_buttons">
    <div class="slider_next_button" onclick="SliderNextImage()">
                <img src="img/background/right-arrow.png" class="responsive"/>
              </div>
              <div class="slider_previous_button" onclick="SliderPreviousImage()">
                <img src="img/background/left-arrow.png" draggable="false" class="responsive"/>
              </div>
    </div>
   
    </div>
 
  </div>

#imageslidercontainer {
  position: relative;
}
.slider_previous_button {
  top: 50%;
  left: 0px;
}
.slider_next_button {
  top: 50%;
  right: 0px;
}
.previous_button {
  left: 300px;
}
.next_button {
  right: 300px;
}

Help as always very much appreciated.

Thanks.

Eliot

 

[tomliv]

The buttons are in a completely separate structure. Without seeing the rest of the CSS, it is hard to troubleshoot.

Based just on this HTML, I would probably not use .imageslider_buttons container. I would put just the arrow buttons inside #imageslidercontainer, add position: relative; on #imageslidercontainer and then continue positioning the buttons where you want them. May need position:absolute on the buttons.

Again, without the full picture, it's a bit tough to tell.