CODEWITHSUNDEEP
csshtmlimagecenter-align
John Doe
John Doe

Reputation: 21

How can I center this DIV (CSS/HTML)

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.sstatic.net/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>

Upvotes: 0

Views: 165

Answers (4)

icktoofay
icktoofay

Reputation: 129011

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.

Upvotes: 1

Bobulous
Bobulous

Reputation: 13169

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.

Upvotes: 0

fvgs
fvgs

Reputation: 21982

This should do the trick.

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

Upvotes: 0

Anonymous
Anonymous

Reputation: 11

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

also, why use float: left in the container?

Upvotes: 0

Related Questions