Question

I’ve got a large div. It contains a bunch of thumbnails. I’d like the thumbnails within the div to be centered inside the div, and the div to be centered on the page. But I’d also like the width of the div to be dynamic so you can see all the thumbnails on every resolution, centered. How could I achieve this?

here’s what I have so far:

<div id="container">
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
</div>

I’ve tried centering it with this css:
The problem is I need an alternative to float:left that works to center so they all float around each other. What I currently have just floats them left so on the wrong browser width, they’re not centered.

#container{margin:auto;width:80%}
.thumb{padding:60px;float:left}

Any ideas on how to do something like float:center?

Answer 1

Firstly, you cannot give the same ID to all the children <div>; That is invalid HTML.

I’d do something like this:

#container{margin:0 auto;width:80%;text-align:center}
#container div{padding:60px;display:inline}

<div id="container">
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
</div>

Alternatively, you could just change all the <div>s to <span>s and remove the display:inline CSS directive. You could also completely remove the <div> or <span> idea and just apply the padding directly to the img tag.

EDIT: Seeing comments posted on another answer, it looks like my answer above still won’t exactly help you. Is this the behavior you’re trying to accomplish? http://jsfiddle.net/9KqQN/1

#container{margin:0 auto;width:80%;text-align:center}
#container span{display:inline-block;text-align:left}

<div id="container">
    <span>
        <img />
        <img />
        <img />
        <br />
        <img />
    </span>
</div>