Centre arrows around a div

[Edrol97]

#imageslidercontainer {
  display: flex;
  position: relative;
  top: 50%;
  margin-left: 25%;
  text-align: center;
}
.slider_previous_button {
  top: 50%;
  left: 0px;
  position: relative;
  height: 600px;
}
.slider_next_button {
  top: 50%;
  right: 0px;
  position: relative;
  height: 600px;
}

Hi all, I've got this CSS to center an image slider gallery I've added to my site along with the arrows. I'm a bit perplexed as to why it's not working. Any ideas?

 

[Johna]

Hi there, do you want this centred vertically or horizontally? Could you post the HTML for this?

 

[Edrol97]

Hi there, do you want this centred vertically or horizontally? Could you post the HTML for this?

I want it hugging the image. The HTML is this:

          <div id="imageslidercontainer">
            
  <div class="imageslider">
    
              <div class="slider_previous_button" onclick="SliderPreviousImage()">
                <img src="img/background/left-arrow.png" draggable="false" class="responsive"/>
              </div>
    <div class="imageslider_images">
    <img class="imgsli" src="img/MorningStarCover.png">
    <img class="imgsli" src="img/MorningStarFullPage.png" width="40%">
    <img class="imgsli" src="img/MorningStarFnF.png">
  </div>
  <div class="slider_next_button" onclick="SliderNextImage()">
    <img src="img/background/right-arrow.png" class="responsive"/>
  </div>
  <div class="imageslider_buttons">
   
    </div>
    
    </div>
  
  </div>

 

[tomliv]

Currently, your buttons are inside .imageslider so all the flexbox on #imageslidercontainer is doing is centering .imageslider. Try moving the arrows outside of .imageslidercontainer or move flex onto .imageslider from .imageslidercontainer.

Other way is absolutely position your arrow buttons inside .imageslider.

 

[Edrol97]

Currently, your buttons are inside .imageslider so all the flexbox on #imageslidercontainer is doing is centering .imageslider. Try moving the arrows outside of .imageslidercontainer or move flex onto .imageslider from .imageslidercontainer.

Other way is absolutely position your arrow buttons inside .imageslider.

Hi Tom, the arrows are specifically for that gallery though. I've tried what I think you've suggested and got this. While the arrows are closer to the correct position they no longer call the images they are meant to despite my slider.js file being unedited.

 

[tomliv]

Hi Tom, the arrows are specifically for that gallery though. I've tried what I think you've suggested and got this. While the arrows are closer to the correct position they no longer call the images they are meant to despite my slider.js file being unedited.

Sounds like the buttons are behind the image slider structure. You can try adjusting their z-index, or, absolutely position them farther out - outside the image area. You can use negative left and right values with absolute positioning to move items beyond their container.

Z-index might be best as it won't cause you issues on mobile.

 

[tomliv]

Also, you have an empty div in there. .imageslider_buttons