How can I center this DIV (CSS/HTML)

Question

I have a DIV that I would like centered. There is no defined width or length because the page is suppose to be versatile with all window sizes (as you re-size window, the page adjusts). I need to keep this, while centering the DIV.

Here are photos of what I mean for visual aid.

https://i.stack.imgur.com/tL0gB.jpg

The DIV "container" which holds all those images needs to be centered. In the picture it is left aligned with a gap on the right.

Just so it's easier to view, here is the code in jsfiddle.

http://jsfiddle.net/fZ4CL/

#container{
    display:box;
    float:left;
    margin-top:40px;
    left:50%;
}
#thumb{
    display:box;
    float:left;
    top:0;
    left:0;
    margin:5px;
    padding:10px;
    background-color:rgba(102,102,102,0.5);}


<body>
<img src='background/001.JPG' class='background'/>
<div id='navigation'>
    <div>
    <ul id='menu'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Albums</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>
    </div>
    <div id='toggle'>
        <a href='#'>Hide All</a>
    </div>       
</div>
<div id='container'>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
</div>

</body>

score 1 · Accepted Answer · answered Mar 24 '13 at 21:19

1

First of all, you can't have multiple elements with the same ID. You have multiple elements with an ID of thumb. You can't do that. Use classes instead.

Then set the display of the thumbnails to inline-block and text-align of the container to center:

#container {
    text-align: center;
}
.thumb {
    display: inline-block;
}

A few other things wrong in your code:

display: box is very unlikely what you want. You probably want block instead.
left and top have no effect whatsoever unless position is set.
You seem to have a strange attraction to float: left where it is unnecessary.
I needed to change a margin to a padding to keep the same spacing.

Look at the result.

answered Mar 24 '13 at 21:19

icktoofay

126,289
21
250
231

Hey icktoofay, thank you for the tips. It's been awhile since I messed with stuff. You solutions works perfectly with the small minor problem that the thumbs are being centered as well. Is there any work around to that? I still want the thumbs to behave left to right and not center. – John Doe Mar 24 '13 at 22:07
@JohnDoe: Oh, I thought that was the effect you desired. If I understand you correctly now, you want it to resize currently except that any extra space the thumbnails can't fill up will be distributed between the left and right of the container? Unfortunately, I don't know how to do that. Sorry. – icktoofay Mar 24 '13 at 22:41
It's fine. I can work with it like this, the more major issue was resolved! Thanks again :) – John Doe Mar 24 '13 at 23:11

score 0 · Answer 2 · answered Mar 24 '13 at 21:04

0

margin: 0 auto; in #container, before the margin-top:

also, why use float: left in the container?

answered Mar 24 '13 at 21:04

Anonymous

11
1

score 0 · Answer 3 · answered Mar 24 '13 at 21:05

0

This should do the trick.

#container {
   margin-left: auto;
   margin-right: auto;
}

answered Mar 24 '13 at 21:05

fvgs

21,412
9
33
48

score 0 · Answer 4 · answered Mar 24 '13 at 21:08

You can't centre a block element unless you give it a defined width. Otherwise the browser will give that element as much width is available, which means it's already centred (with zero space to the left and zero space to the right).

Use min-width and/or max-width to give the element a defined width which is more flexible than a single width value, and then give the element a margin: 1em auto style to centre it horizontally within the unused width available in its parent element.

How can I center this DIV (CSS/HTML)

4 Answers4