how to change button arrow icon position in css?

Question

Excuse me, I want to ask, how do I make the position of the arrow button in the image that I circled can be opposite and its position is the same as in Figure 1? Code:

<button class="pre-btn"><img src="button/arrow-removebg-preview.png" alt=""></button>
<button class="nxt-btn"><img src="button/arrow-removebg-preview.png" alt=""></button>




.pre-btn,
.next-btn{
    margin: 0;
    padding: 0;
    border: none;
    width: 10 ;
    height: 100%;
    position:absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg rgba(255, 255, 255, 0),0% #fff 100% );
    cursor: pointer;
    z-index: 9;
  }

.pre-btn{
    left: 0;
    transform:rotate(180deg);
} 
.next-btn{
    right: 0;
}

Answer 1

If you want to center a arrow by position: absolute . One option is to add a transform: translate .

It means:

Vertical

position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%)

Horizontal

position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%)

Center

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)

Something like this:

 .pre-btn, .next-btn{ z-index: 9; }.btn-container { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; }

 <div class='btn-container'> <button class="pre-btn"><img src="button/arrow-removebg-preview.png" alt="">S</button> <button class="nxt-btn"><img src="button/arrow-removebg-preview.png" alt="">S</button> </div>