CODEWITHSUNDEEP
htmlcss
cvbattum
cvbattum

Reputation: 799

Can't center div properly

This is a problem I had a lot of trouble with: I can't center my divs properly on my webpage. The situation is as follows: the div I'm trying to center is in another div. After a lot of research and hundreds of ways that failed, I managed to center it. However, when I then make the viewport smaller than the div, it suddenly doesn't center anymore and floats to the left. I only have this problem with unordered lists (navigations) in divs.

Here is the code of my webpage (simplified) and on JSBin:

<body>
    <div id="container">
        <header id="topheader">
            ...
        </header>
        <div id="content">
            ...
            <div id="images">
                <ul>
                    <li><a href="#"><img src="..."></a></li>
                    <li><a href="#"><img src="..."></a></li>
                    <li><a href="#"><img src="..."></a></li>
                    <li><a href="#"><img src="..."></a></li>
                </ul>
            </div>
            ...

        </div>
    </div>
</body>

The problem is with the images div. There is also a similar thing somewhere else on the page.

My question is: why is it doing this, and how can it be solved?

Upvotes: 0

Views: 77

Answers (1)

NoobEditor
NoobEditor

Reputation: 15871

margin:0 auto; center's the div, not the content....what i mean to say is, that if your div is 60px wide and content is only 30px wide, then the div will align to center but the content will still align to one-side of the div, not in the center, giving a view that div is not centered.....my suggestion is to use text-align property too with margin

see this DEMO and notice the border to understand that the div is centerd....but content is not~

CSS

#content {
    width:98%;
    margin:0 auto;/*center div*/
    border:1px solid #000;
}
#images {
    width:98%;
    margin:0 auto;/*center div*/
    border:1px solid #CCC;
    text-align:center /*center text*/
}

Upvotes: 1

Related Questions