How can I center this DIV (CSS/HTML)

StackOverflow https://stackoverflow.com/questions/15603958

  •  29-03-2022
  •  | 
  •  

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.

http://imgur.com/NZ6OSWn,LPkYzwM#1

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>
Was it helpful?

Solution

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.

OTHER TIPS

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

also, why use float: left in the container?

This should do the trick.

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top