html - Centering slider navigation arrows according to the image not parent container - Stack Overflow

admin管理员组

文章数量:1220844

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

Share Improve this question Follow asked Feb 8 at 5:49 in2din2d 6381111 silver badges2626 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： htmlCentering slider navigation arrows according to the image not parent containerStack Overflow