'Center a carousel arrows

I need help with centering my carousel arrows on my photo galery. Thanks! Basicly i need a way to make them centered no matter how the img is big, they would still be vertically in the middle of the img.

SCSS made into css later in the script:

.carouselOG {
  position: relative;
  margin: 0;
  padding: 0;
  .arrow-left {
    position: relative;
    width: 4%;
    z-index: 999;
    opacity: 0.8;
    left: 24.7%;
  }
  .arrow-right {
    position: relative;
    width: 4%;
    z-index: 999;
    opacity: 0.8;
    left: 67%;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      img {
        top: -105px;
        margin: 0;
        padding: 0;
        position: relative;
        width: 50%;
        left: 25%;
      }
      display: none;
    }
    li[data-active-og] {
      display: flex;
    }
  }
  .text {
    top: -80px;
    text-align: justify;
    position: relative;
    left: 25%;
    width: 50%;
  }
}

HTML:

<div class="carouselOG" data-carousel-og>
  <img class="arrow-left" src="imgs/left-arrow.svg" alt="left-arrow" data-carousel-button-og="prev">
  <img id="right-arrow-og" class="arrow-right" src="imgs/right-arrow.svg" alt="right-arrow" data-carousel-button-og="next">
  <ul data-slides-og>
    <li><img src="imgs/OG1.jpg" alt="OpenGate photo"></li data-active-og>
    <li><img src="imgs/OG2.jpg" alt="OpenGate photo"></li>
    <li><img src="imgs/OG3.jpg" alt="OpenGate photo"></li>
    <li><img src="imgs/OG4.jpg" alt="OpenGate photo"></li>
    <li><img src="imgs/OG5.jpg" alt="OpenGate photo"></li>
  </ul>
  <div class="text">The venue for just about everything except for the closing ceremony will be the Open Gate School campus. Open Gate is an IB grammar school based just outside of Prague. Its classrooms will be hosting our committee work, which will make use of its modern
    facilities. Its large sports hall will be home to our opening ceremony. Those of you that choose to be accommodated will also enjoy the theater building, and outdoors sports facilities before going to bed at the dormitories.
  </div>
</div>

IMG: enter image description here

Please help me

htmlcss


Solution 1:[1]

Please try margin-top

if the margin-top is not working,

try position: relative; and after position write :

top: 10px; (for example) or change the number of top.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amirfazel Bazchi

Related Questions