Position: absolute, width: unknown. How to center div

Issue

I need to center the div with the dots on the image slider.

I have searched for a way to do this on SO and I found this thread: Position center of div tag, which width is unknown advanced

I applied the solution given there but the result is not as I expected. The div looks to be centered a bit more to the right than it should be.

Can anyone tell me what could be the issue here?

This is happening in FF, in Chrome div is all the way to the right.

Solution

Try this CSS for #sliderDots:

#sliderDots {
    position: relative;
    bottom: 40px;
    display: inline-block;
    background-color: whiteSmoke;
    border-radius: 15px;
    box-shadow: 0 0 10px 3px, 0 0 10px 0 #888 inset;
    padding: 10px 10px 10px 20px;
}

Works fine in IE, FF and Chrome (position changed to relative and bottom to 40px)

Answered By - Viktor S.