How can I center slider navigation buttons based on the images inside each slide instead of the parent container? I have a slider section displaying products with names and prices. The prev/next buttons are currently centered vertically relative to the parent container, but I need them to align with the images inside each .slider-item. I can't wrap the images in a separate div just for centering, as this would break the slider functionality. I have condiered using JS for centering but I don't like the idea of using anything other than HTML and CSS/SCSS.

Right now for centering I use absolute positioning

    .slider-controls {
        position: absolute;
        top: 50%;
        left:50%;
        width: 90%;
        display: flex;
        justify-content: space-between;
        transform: translate(-50%, -50%);
    }

What's the best approach to achieve this?

Quick demo here

How the navigation arrows should be

Cheers!

How can I center slider navigation buttons based on the images inside each slide instead of the parent container? I have a slider section displaying products with names and prices. The prev/next buttons are currently centered vertically relative to the parent container, but I need them to align with the images inside each .slider-item. I can't wrap the images in a separate div just for centering, as this would break the slider functionality. I have condiered using JS for centering but I don't like the idea of using anything other than HTML and CSS/SCSS.

Right now for centering I use absolute positioning

    .slider-controls {
        position: absolute;
        top: 50%;
        left:50%;
        width: 90%;
        display: flex;
        justify-content: space-between;
        transform: translate(-50%, -50%);
    }

What's the best approach to achieve this?

Quick demo here

https://codepen.io/in2d/pen/YPKmJge

How the navigation arrows should be

Cheers!

• html
• css
• sass
• css-position

1 Answer 1

I have a solution here but the downside to it is that the slider images will lose responsiveness.

Idea is to wrap the slider navigation buttons inside a separate div which is absolute positioned and has fixed height lets say 200px, then we need to assign fixed height to the images also which is also 200px. This way it seems that the slider nav buttons are always centered related to the image.

This is just one solution I came up with, still open for other, more responsive solutions.