[Resolved] Image navigation align

[Jusung]

Hello!

When you see this page, you can see the product image.
under the image, I have made dot as a post navigation.

I want to align it to center and I want to include it inside image

.flex-control-nav {
    position: absolute;
    bottom: -45px;
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
}

When I change the bottom in CSS, the navigation can get inside the image, but I can’t make it centered.
Could you help with this?

[Fernando]

Hi Jusung,

Try this CSS instead:

.flex-control-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform:translateX(-50%);
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    width: fit-content;
}

[Jusung]

Thank you!!

It is working perfectly!

[Fernando]

You’re welcome, Jusung!

[Author]

Posts