CODEWITHSUNDEEP
htmlcss
Dharman
Dharman

Reputation: 33266

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

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.

Upvotes: 0

Views: 165

Answers (3)

Mat Richardson
Mat Richardson

Reputation: 3606

You could also put the div inside another container div which is absolutely positioned and in the same space, but then make the sliderDots div relative with margin: auto applied.

Upvotes: 0

Idrizi.A
Idrizi.A

Reputation: 12010

<center style="width:750px;height:20px">
    <div id="sliderDots">
        <ul>
            <li class="activeDot"></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
            <li class="">
            </li></ul>
    </div>
</center>

Why 750px to center?

Because your "content" class has 800px width and right padding + left padding is 50px.

Upvotes: 0

Viktor S.
Viktor S.

Reputation: 12815

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)

Upvotes: 1

Related Questions